<template>
	<view class="content">
		<view class="content_nr">
			<view class="tipsNr">
				<img src="@/static/images/summaryReport/bg/bg2.png" class="tipsNr_topBg" alt="">
				<img src="@/static/images/summaryReport/bg/bg4.png" class="tipsNr_bomBg" alt="">
				<img src="@/static/images/summaryReport/bg/bg18.png" class="tipsNr_dl" alt="">
				<view class="tipsNr_title">
					各位领导: 您好！
				</view>
				<view class="tipsNr_nr" v-html="homeData.f_syzj"></view>
				<view class="guaranteeTasks">
					<img src="@/static/images/summaryReport/bg/bg16.png" class="guaranteeTasks_bg" alt="">
					<view class="guaranteeTasks_titleBg">
						<img src="@/static/images/summaryReport/bg/bg10.png" class="guaranteeTasks_topImg" alt="">
						<span class="guaranteeTasks_topTitle">圆满完成保障任务</span>
					</view>
					<view class="guaranteeTasks_nr">
						<view class="guaranteeTasks_item">
							<img src="@/static/images/summaryReport/pic10.png" class="item_icon" alt="">
							<view class="item_title">
								投入保障人员：
							</view>
							<view class="item_num">
								<span
									style="font-weight: bold;font-size: 34rpx;margin-right: 10rpx;">{{homeData.f_trbzry}}</span>人次
							</view>
						</view>
						<view class="guaranteeTasks_item">
							<img src="@/static/images/summaryReport/pic10.png" class="item_icon" alt="">
							<view class="item_title">
								出动保障车辆：
							</view>
							<view class="item_num">
								<span
									style="font-weight: bold;font-size: 34rpx;margin-right: 10rpx;">{{homeData.f_cdbzcl}}</span>辆次
							</view>
						</view>
						<view class="guaranteeTasks_item">
							<img src="@/static/images/summaryReport/pic10.png" class="item_icon" alt="">
							<view class="item_title">
								派发应急通信车：
							</view>
							<view class="item_num">
								<span
									style="font-weight: bold;font-size: 34rpx;margin-right: 10rpx;">{{homeData.f_pfyjtxc}}</span>辆次
							</view>
						</view>
					</view>
					<view class="guaranteeTasks_nr2">
						<img src="@/static/images/summaryReport/pic10.png" class="guaranteeTasks_nr2_bg" alt="">
						<view class="guaranteeTasks_item2">
							<view class="item2_icon_num">
								<img src="@/static/images/summaryReport/bg/bg11.png" class="item_icon" alt="">
								<view class="item_num">
									<span style="font-weight: bold;">{{homeData.f_zdwlgz}}</span>
								</view>
							</view>
							<view class="item2_title">
								重大网络故障
							</view>
						</view>
						<view class="guaranteeTasks_item2">
							<view class="item2_icon_num">
								<img src="@/static/images/summaryReport/bg/bg13.png" class="item_icon" alt="">
								<view class="item_num">
									<span style="font-weight: bold;">{{homeData.f_zdwlaqsj}}</span>
								</view>
							</view>
							<view class="item2_title">
								重大网络安全事件
							</view>
						</view>
						<view class="guaranteeTasks_item2">
							<view class="item2_icon_num">
								<img src="@/static/images/summaryReport/bg/bg12.png" class="item_icon" alt="">
								<view class="item_num">
									<span style="font-weight: bold;">{{homeData.f_zykhts}}</span>
								</view>
							</view>
							<view class="item2_title">
								重要客户投诉
							</view>
						</view>
						<view class="guaranteeTasks_item2">
							<view class="item2_icon_num">
								<img src="@/static/images/summaryReport/bg/bg14.png" class="item_icon" alt="">
								<view class="item_num">
									<span style="font-weight: bold;">{{homeData.f_fmjdsj}}</span>
								</view>
							</view>
							<view class="item2_title">
								负面焦点事件
							</view>
						</view>
					</view>
					<view class="networkQuality">
						<view class="networkQuality_title">
							网络质量稳定
						</view>
						<view class="networkQuality_nr">
							{{homeData.f_wlzlwd}}
						</view>
					</view>
				</view>
				<view class="bannerView">
					<view class="bannerView_img_title">
						<img :src="bannerImg" class="bannerView_img" alt="" @click="previewImage(bannerImg)">
						<view class="bannerView_title" style="font-weight: bold;">
							{{bannerText}}
						</view>
					</view>
					<scroll-view class="bannerView_imgList" scroll-x="true" :scroll-left="scrollLeft"
						style="white-space: nowrap;">
						<view class="bannerView_imgList_item" @click="onImage(item,index)" ref="navItem"
							v-for="(item,index) in bannerList" :key="index">
							<img :src="item.f_url" class="bannerView_imgList_itemImg"
								:style="currentIndex == index ? 'border: 10rpx solid #FF3B2F;' : '' " alt="">
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 重点场景 -->
			<view class="keyScenes watermark">
				<img src="@/static/images/summaryReport/bg/bg5.png" class="keyScenes_topBg" alt="">
				<view class="keyScenes_nav">
					<view :class="['keyScenes_nav_item', keyScenesAction == index?'keyScenes_active':'']"
						@click="onkeyScenes(item,index)" v-for="(item,index) in keyScenesList" :key="index">
						{{item}}
					</view>
				</view>
				<view v-if="keyScenesAction == '0'" class="keyScenes_nr1">
					<!-- 01 -->
					<view class="business-one">
						<!-- <view class="business-one-left"></view> -->
						<view class="business-one-center" style="margin-left: 60rpx;">{{myxgData.f_sjmyzj}}</view>
						<view class="business-one-right"></view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									省际漫入用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myxgData.f_sjmryhsrj}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_sjmryhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmryhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmryhsjrc != 0? (myxgData.f_sjmryhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_sjmryhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmryhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmryhstb != 0 ? myxgData.f_sjmryhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:300rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef1" style="width:700rpx; height:300rpx"></l-echart>
					</view>
					<view class="keyScenes_text">
						{{myxgData.f_sjmrzj}}
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							漫入客户来源地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_sjmrdymsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmrdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_sjmrdemsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmrdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_sjmrdsmsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmrdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									省际漫出用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myxgData.f_sjmcyhsrj}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_sjmcyhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmcyhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmcyhsjrc != 0? (myxgData.f_sjmcyhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_sjmcyhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmcyhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmcyhstb != 0 ? myxgData.f_sjmcyhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:300rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef2" style="width:700rpx; height:300rpx"></l-echart>
					</view>
					<!-- <view class="keyScenes_text">
							省际漫游高峰出现在初三，漫游用户数达到xxxxx万
						</view> -->
					<view class="keyScenes_top3" style="margin-top: 50rpx;">
						<view class="keyScenes_top3_title">
							漫出客户来源地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_sjmcdymsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmcdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_sjmcdemsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmcdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_sjmcdsmsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmcdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="keyScenesAction == '1'" class="keyScenes_nr1">
					<!-- 02 -->
					<view class="business-one">
						<!-- <view class="business-one-left"></view> -->
						<view class="business-one-center" style="margin-left: 60rpx;">{{myxgData.f_gjmyzj}}</view>
						<view class="business-one-right"></view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									国际及港澳台地区<br />
									漫入用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myxgData.f_gjjgatdqmryhsrj}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmryhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmryhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmryhsjrc != 0? (myxgData.f_gjjgatdqmryhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmryhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmryhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmryhstb != 0 ? myxgData.f_gjjgatdqmryhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:300rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef3" style="width:700rpx; height:300rpx"></l-echart>
					</view>
					<view class="keyScenes_text">
						{{myxgData.f_gjjgatdqmrzj}}
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							漫入客户来源地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_gjjgatdqmrdymgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmrdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_gjjgatdqmrdemgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmrdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_gjjgatdqmrdsmgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmrdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									国际及港澳台地区<br />
									漫出用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myxgData.f_gjjgatdqmcyhsrj}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmcyhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmcyhsjrc==0? 'draw-right-icon3':'']">
											{{myxgData.f_gjjgatdqmcyhsjrc != 0? (myxgData.f_gjjgatdqmcyhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmcyhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmcyhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmcyhstb != 0 ? myxgData.f_gjjgatdqmcyhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:300rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef4" style="width:700rpx; height:300rpx"></l-echart>
					</view>
					<view class="keyScenes_top3" style="margin-top: 50rpx;">
						<view class="keyScenes_top3_title">
							漫出客户去向地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_gjjgatdqmcdymgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmcdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_gjjgatdqmcdemgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmcdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 150rpx;">
									{{myxgData.f_gjjgatdqmcdsmgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmcdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="keyScenesAction == '2'" class="keyScenes_nr3">
					<!-- 03 -->
					<view class="business-one">
						<view class="business-one-left keyScenes3bg"></view>
						<view class="business-one-center" style="width: 530rpx;">{{zbData.f_zbqyzj}}</view>
						<view class="business-one-right"></view>
					</view>
					<!-- 高铁 -->
					<img src="@/static/images/summaryReport/banner1.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							高铁5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb1"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">10</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb2"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">100</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gt5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gt5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gt5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							高铁4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb1_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb2_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">15</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gt4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gt4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gt4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门高铁流量TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgtd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name">
									{{zbData.f_rmgtd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgtd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 高速 -->
					<img src="@/static/images/summaryReport/banner2.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							高速5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb3"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">15</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">200</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gs5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gs5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gs5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							高速4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb3_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb4_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gs4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gs4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gs4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门高速流量TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgsd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name">
									{{zbData.f_rmgsd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgsd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 景区 -->
					<img src="@/static/images/summaryReport/banner3.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							景区5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb5"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">15</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb6"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">300</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jq5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jq5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jq5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							景区4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb5_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb6_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jq4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jq4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jq4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门景区流量TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjqd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjqd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjqd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 交通枢纽 -->
					<img src="@/static/images/summaryReport/banner4.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							交通枢纽5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb7"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">15</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb8"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">400</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jtsn5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jtsn5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jtsn5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							交通枢纽4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb7_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb8_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jtsn4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jtsn4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jtsn4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门交通枢纽流量TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name">
									{{zbData.f_rmjtsnd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjtsnd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjtsnd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 农村 -->
					<img src="@/static/images/summaryReport/banner5.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							农村5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb9"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">10</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb10"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">100</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_nc5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_nc5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_nc5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							农村4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb9_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb10_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_nc4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_nc4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_nc4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							高人气行政村流量TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_grqxzcd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" >
									{{zbData.f_grqxzcd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_grqxzcd3}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 业务保障情况 -->
			<view class="business watermark">
				<view class="business-title"></view>
				<view class="business-list">
					<view :class="['business-list-item', activeTitle==item.id?'active':'']" v-for="item in businessList"
						:key="item.id" @click="changeBusiness(item.id)">
						{{item.name}}
					</view>
				</view>
				<view class="watermark2" v-if="activeTitle === '1'">
					<!-- 01 -->
					<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{sjyhrjData.f_sjyhszj}}</view>
						<view class="business-one-right">01</view>
					</view>
					<!-- 手机用户数日均 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									手机用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{sjyhrjData.f_sjyhsrj}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[sjyhrjData.f_sjyhsrcb>0?'draw-right-icon1':'draw-right-icon2',sjyhrjData.f_sjyhsrcb==0? 'draw-right-icon3':'']">
										{{sjyhrjData.f_sjyhsrcb != 0? (sjyhrjData.f_sjyhsrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[sjyhrjData.f_sjyhsrjtb>0?'draw-right-icon1':'draw-right-icon2',sjyhrjData.f_sjyhsrjtb==0? 'draw-right-icon3':'']">
										{{sjyhrjData.f_sjyhsrjtb != 0? (sjyhrjData.f_sjyhsrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 柱状折线 -->
					<view style="width:700rpx; height:300rpx;margin-top: 40rpx;">
						<l-echart ref="echartRef5" style="width:700rpx; height:300rpx"></l-echart>
					</view>
					<view class="keyScenes_text">
						{{sjyhrjData.f_sjyhsqkzj}}
					</view>
					<!-- 02 -->
					<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{hxwllData.f_sjswzj}}</view>
						<view class="business-one-right">02</view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									5G/4G流量日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{hxwllData.f_54llrj}}</view>
									<view class="draw-left-bottom-unit">TB</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[hxwllData.f_54lljrc>0?'draw-right-icon1':'draw-right-icon2',hxwllData.f_54lljrc==0? 'draw-right-icon3':'']">
										{{hxwllData.f_54lljrc != 0? (hxwllData.f_54lljrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[hxwllData.f_54lltb>0?'draw-right-icon1':'draw-right-icon2',hxwllData.f_54lltb==0? 'draw-right-icon3':'']">
										{{hxwllData.f_54lltb != 0? (hxwllData.f_54lltb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									5G流量日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{hxwllData.f_5gllrj}}</view>
									<view class="draw-left-bottom-unit">TB</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[hxwllData.f_5gllrjjrc>0?'draw-right-icon1':'draw-right-icon2',hxwllData.f_5gllrjjrc==0? 'draw-right-icon3':'']">
										{{hxwllData.f_5gllrjjrc != 0? (hxwllData.f_5gllrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[hxwllData.f_5gllrjtb>0?'draw-right-icon1':'draw-right-icon2',hxwllData.f_5gllrjtb==0? 'draw-right-icon3':'']">
										{{hxwllData.f_5gllrjtb != 0? (hxwllData.f_5gllrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									4G流量日均
								</view>
								<view class="draw-left-bottom">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{hxwllData.f_4gllrj}}</view>
									<view class="draw-left-bottom-unit">TB</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[hxwllData.f_4gllrjjrc>0?'draw-right-icon1':'draw-right-icon2',hxwllData.f_4gllrjjrc==0? 'draw-right-icon3':'']">
										{{hxwllData.f_4gllrjjrc != 0? (hxwllData.f_4gllrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[hxwllData.f_4gllrjtb>0?'draw-right-icon1':'draw-right-icon2',hxwllData.f_4gllrjtb==0? 'draw-right-icon3':'']">
										{{hxwllData.f_4gllrjtb != 0?(hxwllData.f_4gllrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 堆叠图 -->
					<view style="width:700rpx; height:300rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef" style="width:700rpx; height:300rpx"></l-echart>
					</view>
					<!-- 5G分流 -->
					<view class="shunt">
						<view class="shunt-left">
							<view class="shunt-left-chart" style="width:188rpx; height:188rpx;margin: 0 auto;">
								<l-echart ref="chartRef1" style="width:188rpx; height:188rpx;"></l-echart>
							</view>
							<view class="shunt-left-font">
								5G分流比日均
							</view>
							<view
								:class="[sjswData.f_5gflbjrc>0?'shunt-left-font3':'shunt-left-font2',sjswData.f_5gflbjrc==0?'shunt-left-font1':'']">
								<i></i>
								较日常：{{sjswData.f_5gflbjrc + 'PP'}}
							</view>
							<view
								:class="[sjswData.f_5gflbtb>0?'shunt-left-font3':'shunt-left-font2',sjswData.f_5gflbtb==0?'shunt-left-font1':'']">
								<i></i>
								同比: {{sjswData.f_5gflbtb +'PP'}}
							</view>
						</view>
						<view class="shunt-right">
							<view class="shunt-right-picture"></view>
							<view class="shunt-right-font">5G分流比top3</view>
							<view class="shunt-right-font1" v-for="item in cityList" :key="item.id">
								<view class="icon1">{{item.id}}
								</view>
								<view class="city">{{item.name}}</view>
								<view class="percentage">{{item.value}}%</view>
							</view>
						</view>
					</view>
					<!-- 文字段落 -->
					<view class="paragraph" v-if="hxwllData.f_remark">
						<view class="paragraph-text">
							{{hxwllData.f_remark}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view>
					<!-- 02 -->
					<view class="business-one">
						<view class="business-one-left business-two-left"></view>
						<view class="business-one-center">{{CHBNgerenData.f_spywzj}}</view>
						<view class="business-one-right">03</view>
					</view>
					<!-- 流量业务 -->
					<view class="traffic">
						<view class="traffic-left ">
							<view class="traffic-left-title">
								<view class="title-font">
									5G流量业务</br>
									分类占比top5
								</view>
								<view class="title-bg"></view>
							</view>
							<view class="traffic-left-content">
								<view class="content-item" v-for="item in proportion5GList" :key="item.id">
									<view class="content-left">{{item.id}}</view>
									<view class="content-center">
										<view class="content-center-font">
											{{item.name}}
										</view>
										<u-line-progress style="width: 120rpx; height: 10rpx;"
											:active-color="item.color" :percent="+item.value"
											:show-percent="false"></u-line-progress>
									</view>
									<view class="content-right">{{item.value + '%'}}</view>
								</view>
							</view>
							<view class="traffic-left-title" style="padding-top: 50rpx;">
								<view class="title-font">
									5G流量业务</br>
									占比top5
								</view>
								<view class="title-bg"></view>
							</view>
							<view class="traffic-left-content">
								<view class="content-item" v-for="item in app5GList" :key="item.id">
									<view :class="['content-left',setBackground(item.name)]"></view>
									<view class="content-center" style="width: 140rpx; margin: 0 10rpx;">
										<view class="content-center-font">
											{{item.name}}
										</view>
										<u-line-progress style="width: 80rpx; height: 10rpx;" :active-color="item.color"
											:percent="+item.value" :show-percent="false"></u-line-progress>
									</view>
									<view class="content-right">{{item.value + '%'}}</view>
								</view>
							</view>
							<view class="visit">5G HTTP访问成功率</view>
							<view class="visit-chart1" style="width:210rpx; height:214rpx;">
								<l-echart ref="chartRef4" style="width:155rpx; height:155rpx;"></l-echart>
							</view>
						</view>
						<view class="traffic-left traffic-right">
							<view class="traffic-left-title">
								<view class="title-font">
									4G流量业务</br>
									分类占比top5
								</view>
								<view class="title-bg"></view>
							</view>
							<view class="traffic-left-content">
								<view class="content-item" v-for="(item,index) in proportion4GList" :key="item.id">
									<view class="content-left">{{item.id}}</view>
									<view class="content-center">
										<view class="content-center-font">
											{{item.name}}
										</view>
										<u-line-progress style="width: 140rpx; height: 10rpx;"
											:active-color="item.color" :percent="+item.value"
											:show-percent="false"></u-line-progress>
									</view>
									<view class="content-right">{{item.value + '%'}}</view>
								</view>
							</view>
							<view class="traffic-left-title" style="padding-top: 50rpx;">
								<view class="title-font">
									4G流量业务</br>
									占比top5
								</view>
								<view class="title-bg"></view>
							</view>
							<view class="traffic-left-content">
								<view class="content-item" v-for="item in app4GList" :key="item.id">
									<view :class="['content-left',setBackground(item.name)]"></view>
									<view class="content-center" style="width: 140rpx; margin: 0 10rpx;">
										<view class="content-center-font">
											{{item.name}}
										</view>
										<u-line-progress style="width: 80rpx; height: 10rpx;" :active-color="item.color"
											:percent="+item.value" :show-percent="false"></u-line-progress>
									</view>
									<view class="content-right">{{item.value + '%'}}</view>
								</view>
							</view>
							<view class="visit">4G HTTP访问成功率</view>
							<view class="visit-chart" style="width:210rpx; height:214rpx;">
								<l-echart ref="chartRef3" style="width:155rpx; height:155rpx;"></l-echart>
							</view>
						</view>

					</view>
					<!-- 文字段落 -->
					<view class="paragraph" v-if="CHBNgerenData.f_remark">
						<view class="paragraph-text">
							{{CHBNgerenData.f_remark}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view>
					<!-- 03 -->
					<view class="business-one">
						<view class="business-one-left business-three-left"></view>
						<view class="business-one-center">{{hwlData.f_hwlzj}}</view>
						<view class="business-one-right">04</view>
					</view>
					<!-- 话务量  较日常/同比 -->
					<view class="compare" style="margin-top: 30rpx;">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									总话务量日均
								</view>
								<view class="draw-left-bottom">
									<view class="traffic1"></view>
									<view class="draw-left-bottom-font">{{hwlData.f_zhwlrj}}</view>
									<view class="draw-left-bottom-unit">万ERL</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[hwlData.f_zhwlrjjrc>0?'draw-right-icon1':'draw-right-icon2',hwlData.f_zhwlrjjrc==0? 'draw-right-icon3':'']">
										{{hwlData.f_zhwlrjjrc != 0? (hwlData.f_zhwlrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[hwlData.f_zhwlrjtb>0?'draw-right-icon1':'draw-right-icon2',hwlData.f_zhwlrjtb==0? 'draw-right-icon3':'']">
										{{hwlData.f_zhwlrjtb != 0?  (hwlData.f_zhwlrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									5G话务量日均
								</view>
								<view class="draw-left-bottom">
									<view class="traffic1"></view>
									<view class="draw-left-bottom-font">{{hwlData.f_5ghwlrj}}</view>
									<view class="draw-left-bottom-unit">万ERL</view>
								</view>
							</view>
							<view class="draw-right">
								<!-- <view class="draw-right-daily">
									<view
										:class="[hwlData.f_5ghwlrjjrc>0?'draw-right-icon1':'draw-right-icon2',hwlData.f_5ghwlrjjrc==0? 'draw-right-icon3':'']">
										{{hwlData.f_5ghwlrjjrc != 0? (hwlData.f_5ghwlrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
									<view class="draw-right-daily" style="width: 100rpx;">
									<view
										:class="[hwlData.f_5ghwlrjtb>0?'draw-right-icon1':'draw-right-icon2',hwlData.f_5ghwlrjtb==0? 'draw-right-icon3':'']">
										{{hwlData.f_5ghwlrjtb != 0? hwlData.f_5ghwlrjtb + '%':''}}
									</view>
									同比
								</view> -->
							</view>
						</view>
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									4G话务量日均
								</view>
								<view class="draw-left-bottom">
									<view class="traffic1"></view>
									<view class="draw-left-bottom-font">{{hwlData.f_4ghwlrj}}</view>
									<view class="draw-left-bottom-unit">万ERL</view>
								</view>
							</view>
							<view class="draw-right">
								<!-- <view class="draw-right-daily">
									<view
										:class="[hwlData.f_4ghwlrjjrc>0?'draw-right-icon1':'draw-right-icon2',hwlData.f_4ghwlrjjrc==0? 'draw-right-icon3':'']">
										{{hwlData.f_4ghwlrjjrc != 0?(hwlData.f_4ghwlrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
									<view class="draw-right-daily" style="width: 100rpx;">
									<view
										:class="[hwlData.f_4ghwlrjtb>0?'draw-right-icon1':'draw-right-icon2',hwlData.f_4ghwlrjtb==0? 'draw-right-icon3':'']">
										{{hwlData.f_4ghwlrjtb != 0? hwlData.f_4ghwlrjtb + '%':''}}
									</view>
									同比
								</view> -->
							</view>
						</view>
					</view>
					<!-- 第二个双柱状图 -->
					<view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef5" style="width:700rpx; height:320rpx"></l-echart>
					</view>
					<!-- 文字段落 -->
					<view class="paragraph" v-if="hwlData.f_remark">
						<view class="paragraph-text">
							{{hwlData.f_remark}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view>
					<!-- 04 -->
					<view class="business-one">
						<view class="business-one-left business-three-left"></view>
						<view class="business-one-center">{{dxData.f_dxzj}}</view>
						<view class="business-one-right">05</view>
					</view>
					<!-- 短信  较日常/同比 -->
					<view class="compare" style="margin-top: 30rpx;">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top" style="text-align: center;">
									短信日均
								</view>
								<view class="draw-left-bottom">
									<view class="message"></view>
									<view class="draw-left-bottom-font">{{dxData.f_dxrj}}</view>
									<view class="draw-left-bottom-unit">亿条</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_dxrjjrc>0?'draw-right-icon1':'draw-right-icon2',dxData.f_dxrjjrc==0? 'draw-right-icon3':'']">
										{{dxData.f_dxrjjrc != 0? (dxData.f_dxrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_dxrjtb>0?'draw-right-icon1':'draw-right-icon2',dxData.f_dxrjtb==0? 'draw-right-icon3':'']">
										{{dxData.f_dxrjtb != 0? (dxData.f_dxrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 双柱状图 -->
					<view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef6" style="width:700rpx; height:320rpx"></l-echart>
					</view>
					<!-- 行业短信日均 -->
					<view class="compare" style="margin-top: 75rpx;">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									行业短信日均
								</view>
								<view class="draw-left-bottom">
									<view class="message"></view>
									<view class="draw-left-bottom-font">{{dxData.f_hydxrj}}</view>
									<view class="draw-left-bottom-unit">亿条</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_hydxrjjrc>0?'draw-right-icon1':'draw-right-icon2',dxData.f_hydxrjjrc==0? 'draw-right-icon3':'']">
										{{dxData.f_hydxrjjrc != 0? (dxData.f_hydxrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_hydxrjtb>0?'draw-right-icon1':'draw-right-icon2',dxData.f_hydxrjtb==0? 'draw-right-icon3':'']">
										{{dxData.f_hydxrjtb != 0? (dxData.f_hydxrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									梦网短信日均
								</view>
								<view class="draw-left-bottom">
									<view class="message"></view>
									<view class="draw-left-bottom-font">{{dxData.f_mwdxrj}}</view>
									<view class="draw-left-bottom-unit">亿条</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_mwdxrjjrc>0?'draw-right-icon1':'draw-right-icon2',dxData.f_mwdxrjjrc==0? 'draw-right-icon3':'']">
										{{dxData.f_mwdxrjjrc != 0? (dxData.f_mwdxrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_mwdxrjtb>0?'draw-right-icon1':'draw-right-icon2',dxData.f_mwdxrjtb==0? 'draw-right-icon3':'']">
										{{dxData.f_mwdxrjtb != 0? (dxData.f_mwdxrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									点对点短信日均
								</view>
								<view class="draw-left-bottom">
									<view class="message"></view>
									<view class="draw-left-bottom-font">{{dxData.f_ddddxrj}}</view>
									<view class="draw-left-bottom-unit">亿条</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_ddddxrjjrc>0?'draw-right-icon1':'draw-right-icon2',dxData.f_ddddxrjjrc==0? 'draw-right-icon3':'']">
										{{dxData.f_ddddxrjjrc != 0? (dxData.f_ddddxrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[dxData.f_ddddxrjtb>0?'draw-right-icon1':'draw-right-icon2',dxData.f_ddddxrjtb==0? 'draw-right-icon3':'']">
										{{dxData.f_ddddxrjtb != 0? (dxData.f_ddddxrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 2024/2025 -->
					<view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef7" style="width:700rpx; height:320rpx"></l-echart>
					</view>
					<!-- 文字段落 -->
					<view class="paragraph" v-if="dxData.f_dxqkzj">
						<view class="paragraph-text">
							{{dxData.f_dxqkzj}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view>
				</view>
				<!-- 家庭业务 -->
				<view class="watermark2" v-if="activeTitle === '2'">
					<!-- 01 -->
					<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{jkschbnData.f_jkzj}}</view>
						<view class="business-one-right">01</view>
					</view>

					<view class="compare">
						<view class="draw">
							<view class="draw-left" style="width: 60%;">
								<view class="draw-left-top">
									家宽活跃用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="traffic5"></view>
									<view class="draw-left-bottom-font">{{jkschbnData.f_jkzxfzyhs}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right" style="width: 40%;">
								<view class="draw-right-daily">
									<view
										:class="[jkschbnData.f_jkzxfzyhsjrc>0?'draw-right-icon1':'draw-right-icon2',jkschbnData.f_jkzxfzyhsjrc==0? 'draw-right-icon3':'']">
										{{jkschbnData.f_jkzxfzyhsjrc != 0? (jkschbnData.f_jkzxfzyhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[jkschbnData.f_jkzxfzyhstb>0?'draw-right-icon1':'draw-right-icon2',jkschbnData.f_jkzxfzyhstb==0? 'draw-right-icon3':'']">
										{{jkschbnData.f_jkzxfzyhstb != 0? (jkschbnData.f_jkzxfzyhstb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 家庭业务第一个柱状图 -->
					<view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef12" style="width:700rpx; height:320rpx"></l-echart>
					</view>
					<!-- 文字段落 -->
					<!-- <view class="paragraph" v-if="jkschbnData.f_jkqkzj">
						<view class="paragraph-text">
							{{jkschbnData.f_jkqkzj}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view> -->
					<!-- 家宽装机及时率/投诉处理及时率 -->
					<view class="traffic">
						<view class="traffic-left">
							<view class="visit-chart" style="width:210rpx; height:214rpx;">
								<l-echart ref="chartRef13" style="width:155rpx; height:155rpx;"></l-echart>
							</view>
							<view class="visit">装机及时率</view>
						</view>
						<view class="traffic-left traffic-right">
							<view class="visit-chart1" style="width:210rpx; height:214rpx;">
								<l-echart ref="chartRef14" style="width:155rpx; height:155rpx;"></l-echart>
							</view>
							<view class="visit">投诉处理及时率</view>
						</view>
					</view>
					<!-- 02 -->
					<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{CHBNjiatingData.f_hlwdszj}}</view>
						<view class="business-one-right">02</view>
					</view>

					<view class="compare">
						<view class="draw">
							<view class="draw-left" style="width: 60%;">
								<view class="draw-left-top">
									互联网电视播放用户数日均
								</view>
								<view class="draw-left-bottom">
									<view class="traffic4"></view>
									<view class="draw-left-bottom-font">{{CHBNjiatingData.f_hlwdsssyhrj}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right" style="width: 40%;">
								<view class="draw-right-daily">
									<view
										:class="[CHBNjiatingData.f_hlwdsssyhrjjrc>0?'draw-right-icon1':'draw-right-icon2',CHBNjiatingData.f_hlwdsssyhrjjrc==0? 'draw-right-icon3':'']">
										{{CHBNjiatingData.f_hlwdsssyhrjjrc != 0? (CHBNjiatingData.f_hlwdsssyhrjjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[CHBNjiatingData.f_hlwdsssyhrjtb>0?'draw-right-icon1':'draw-right-icon2',CHBNjiatingData.f_hlwdsssyhrjtb==0? 'draw-right-icon3':'']">
										{{CHBNjiatingData.f_hlwdsssyhrjtb != 0?(CHBNjiatingData.f_hlwdsssyhrjtb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>

					<view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef21" style="width:700rpx; height:320rpx"></l-echart>
					</view>
					<!-- 三个速度图 -->
					<view class="threeChart">
						<view class="threeChart-item">
							<view class="threeChart-item-casing">
								<l-echart ref="chartRef15" style="width:100%; height:160rpx;"></l-echart>
							</view>
							<view class="threeChart-item-text">
								互联网电视日</br>均播放成功率
							</view>
						</view>
						<view class="threeChart-item">
							<view class="threeChart-item-casing">
								<l-echart ref="chartRef16" style="width:100%; height:160rpx;"></l-echart>
							</view>
							<view class="threeChart-item-text">
								卡顿</br>时长占比
							</view>
						</view>
						<view class="threeChart-item">
							<view class="threeChart-item-casing">
								<l-echart ref="chartRef17" style="width:100%; height:160rpx;"></l-echart>
							</view>
							<view class="threeChart-item-text">
								EPG成功率</br>
							</view>
						</view>
					</view>
					<!-- 03 -->
					<view class="business-one" style="margin-top: 60rpx;">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{CHBNjiatingData.f_sszj}}</view>
						<view class="business-one-right">03</view>
					</view>

					<view class="compare">
						<view class="draw">
							<view class="draw-left" style="width: 60%;">
								<view class="draw-left-top">
									CCTV1日累计收视用户数
								</view>
								<view class="draw-left-bottom">
									<view class="traffic4"></view>
									<view class="draw-left-bottom-font">{{CHBNjiatingData.f_rljssyhs}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right" style="width: 40%;">
								<view class="draw-right-daily">
									<view
										:class="[CHBNjiatingData.f_rljssyhsjrc>0?'draw-right-icon1':'draw-right-icon2',CHBNjiatingData.f_rljssyhsjrc==0? 'draw-right-icon3':'']">
										{{CHBNjiatingData.f_rljssyhsjrc != 0? (CHBNjiatingData.f_rljssyhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily">
									<view
										:class="[CHBNjiatingData.f_rljssyhstb>0?'draw-right-icon1':'draw-right-icon2',CHBNjiatingData.f_rljssyhstb==0? 'draw-right-icon3':'']">

										{{ CHBNjiatingData.f_rljssyhstb != 0 ? (CHBNjiatingData.f_rljssyhstb + '').replace(/[-+]/g, '') + '%' : '' }}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 家庭业务 第二个双柱状图 -->
					<view style="width:700rpx; height:320rpx;margin-top: 30rpx;">
						<l-echart ref="chartRef18" style="width:700rpx; height:320rpx"></l-echart>
					</view>
					<!-- 家庭业务 文字段落 -->
					<!-- <view class="paragraph" v-if="CHBNjiatingData.f_rljssyhszj">
						<view class="paragraph-text">
							{{CHBNjiatingData.f_rljssyhszj}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view> -->
				</view>

				<!-- 政企业务 -->
				<view class="watermark2" v-if="activeTitle === '3'">
					<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{qsData.f_zqzj}}</view>
					</view>
					<view class="government">
						<view class="government-bg"></view>
					</view>
					<view class="paragraph" style="margin-top: 0rpx;" v-if="qsData.f_zqqkzj">
						<view class="paragraph-text">
							{{qsData.f_zqqkzj}}
							<view class="paragraph-bg"></view>
							<view class="paragraph-bg1"></view>
						</view>
					</view>
					<view class="keynote">
						<view class="keynote-item">
							<view class="keynote-item-icon"></view>
							<view class="keynote-item-text">
								<view class="font">{{qsData.f_zbkhs}}<span>户</span></view>
								<view class="font1">重保客户数</view>
							</view>
						</view>
						<view class="keynote-item">
							<view class="keynote-item-icon1"></view>
							<view class="keynote-item-text">
								<view class="font">{{qsData.f_zbzxs}}<span>条</span></view>
								<view class="font1">重保专线数</view>
							</view>
						</view>
					</view>
					<view class="available">
						<view class="available-icon"></view>
						<view class="available-text">
							<view class="available-text-top">
								<view class="font">重保专线可用率</view>
								<view class="font1">{{qsData.f_zbzxkyl}}%</view>
							</view>
							<u-line-progress style="width: 432rpx; height: 10rpx;" active-color="#0CB480"
								:percent="qsData.f_zbzxkyl" :show-percent="false"></u-line-progress>
						</view>
					</view>
					<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center">{{qsData.f_skywzj}}</view>
					</view>
					<view class="traffic">
						<view class="traffic-left">
							<view class="visit-chart" style="width:210rpx; height:214rpx;">
								<l-echart ref="chartRef19" style="width:155rpx; height:155rpx;"></l-echart>
							</view>
							<view class="visit">商客宽带开通及时率</view>
						</view>
						<view class="traffic-left traffic-right">
							<view class="visit-chart1" style="width:210rpx; height:214rpx;">
								<l-echart ref="chartRef20" style="width:155rpx; height:155rpx;"></l-echart>
							</view>
							<view class="visit">FTTO开通及时率</view>
						</view>
					</view>
				</view>

				<view class="watermark4" v-if="activeTitle === '4'">
					<view class="business-one">
						<view class="business-one-left business-one-left1"></view>
						<view class="business-one-center">{{xywData.f_xywzj}}</view>
					</view>
					<view class="success-rate">
						<view class="success-rate-item">
							<view class="success-rate-item-top">视频彩铃</view>
							<view class="success-rate-item-bottom">
								<view class="item-bg"></view>
								<view class="item-font">
									<view class="text1">{{xywData.f_spclfycgl+'%'}}</view>
									<view class="text2">播放成功率</view>
									<u-line-progress style="width: 120rpx; height: 10rpx;" active-color="#6F1348"
										:percent="xywData.f_spclfycgl" :show-percent="false"></u-line-progress>
								</view>
							</view>
						</view>
						<view class="success-rate-item">
							<view class="success-rate-item-top">咪咕视频</view>
							<view class="success-rate-item-bottom">
								<view class="item-bg item-bg1"></view>
								<view class="item-font">
									<view class="text1" style="color:#0CB480;">{{xywData.f_mgspbfcgl+'%'}}</view>
									<view class="text2">放音成功率</view>
									<u-line-progress style="width: 120rpx; height: 10rpx;" active-color="#0CB480"
										:percent="xywData.f_mgspbfcgl" :show-percent="false"></u-line-progress>
								</view>
							</view>
						</view>
						<view class="success-rate-item" style="margin-top: 43rpx;">
							<view class="success-rate-item-top">移动认证</view>
							<view class="success-rate-item-bottom">
								<view class="item-bg item-bg2"></view>
								<view class="item-font">
									<view class="text1" style="color:#DB761E;">{{xywData.f_ydrzqhcgl+'%'}}</view>
									<view class="text2">取号成功率</view>
									<u-line-progress style="width: 120rpx; height: 10rpx;" active-color="#DB761E"
										:percent="xywData.f_ydrzqhcgl" :show-percent="false"></u-line-progress>
								</view>
							</view>
						</view>
						<view class="success-rate-item" style="margin-top: 43rpx;">
							<view class="success-rate-item-top">超级SIM</view>
							<view class="success-rate-item-bottom">
								<view class="item-bg item-bg3"></view>
								<view class="item-font">
									<view class="text1" style="color:#0962C4;">{{xywData.f_cjsimdxxfcgl+'%'}}</view>
									<view class="text2">短信下发成功率</view>
									<u-line-progress style="width: 120rpx; height: 10rpx;" active-color="#1B9CFF"
										:percent="xywData.f_cjsimdxxfcgl" :show-percent="false"></u-line-progress>
								</view>
							</view>
						</view>
						<view class="success-rate-item" style="margin-top: 43rpx;">
							<view class="success-rate-item-top">移动网盘</view>
							<view class="success-rate-item-bottom">
								<view class="item-bg item-bg4"></view>
								<view class="item-font">
									<view class="text1" style="color:#007AFF;">{{xywData.f_ydwpwjxzslrj+'mbps'}}
									</view>
									<view class="text2">文件下载</br>速率日均</view>
								</view>
							</view>
						</view>
						<view class="success-rate-item" style="margin-top: 43rpx;">
							<view class="success-rate-item-top">咪咕快游</view>
							<view class="success-rate-item-bottom">
								<view class="item-bg item-bg5"></view>
								<view class="item-font">
									<view class="text1" style="color:#0CB480;">{{xywData.f_mgkydddjhsyrj+'ms'}}</view>
									<view class="text2">端到端交互</br>时延日均</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 网络保障情况 -->
			<view class="network-assurance">
				<view class="network-assurance-title"></view>
				<!-- 网络01 -->
				<view class="business-one">
					<view class="business-one-left"></view>
					<view class="business-one-center">{{zywlData.f_nrzj}}</view>
					<view class="business-one-right">01</view>
				</view>
				<!-- top20网站 -->
				<view class="website">
					<view class="website-left">
						<view class="website-left-title">
							全网TOP2000网站</br>
							平均首屏延时
						</view>
						<view
							style="width:100%; height:160rpx;margin-top: 20rpx;display: flex;justify-content: center;">
							<l-echart ref="chartRef8" style="width:160rpx; height:160rpx"></l-echart>
						</view>
						<view style="width:100%; height:220rpx;">
							<l-echart ref="chartRef10" style="width:100%; height:220rpx"></l-echart>
						</view>
					</view>
					<view class="website-line"></view>
					<view class="website-left">
						<view class="website-left-title">
							全网TOP20视频</br>
							播放延时
						</view>
						<view
							style="width:100%; height:160rpx;margin-top: 20rpx;display: flex;justify-content: center;">
							<l-echart ref="chartRef9" style="width:160rpx; height:160rpx"></l-echart>
						</view>
						<view style="width:100%; height:220rpx;">
							<l-echart ref="chartRef11" style="width:100%; height:220rpx"></l-echart>
						</view>
					</view>
				</view>
				<!-- 网络02 -->
				<!-- <view class="network-two">
					<view class="network-two-left">
						{{zywlData.f_cdnzj}}
					</view>
					<view class="network-two-right">02</view>
				</view> -->
				<!-- 网络03 -->
				<view class="network-two" style="margin-top: 20rpx;">
					<view class="network-two-left">
						{{itData.f_hyyzycqk}}
					</view>
					<view class="network-two-right">02</view>
				</view>
				<!-- 网络04 -->
				<view class="network-two" style="margin-top: 20rpx;">
					<view class="network-two-left">
						{{zywlData.f_cmnetzj}}
					</view>
					<view class="network-two-right">03</view>
				</view>
			</view>
			<!-- 网络安全保障情况 -->
			<view class="secure watermark1">
				<view class="secure-title"></view>
				<view class="business-one">
					<view class="business-one-left"></view>
					<view class="business-one-center">{{aqbData.f_aqzj}}</view>
				</view>
				<view class="secure-text">
					<view class="secure-text-left"></view>
					<view class="secure-text-right">
						{{aqbData.f_aqqk}}
					</view>
				</view>
				<view class="secure-number">
					<view class="secure-number-one">
						<view class="one-text">
							<view class="one-icon"></view>
							发现网络安全告警
						</view>
						<view class="one-number">
							{{aqbData.f_fxwlaqgj}}<i>万条</i>
						</view>
					</view>
					<view class="secure-number-one">
						<view class="one-text">
							<view class="one-icon one-icon2"></view>
							研判重点事件
						</view>
						<view class="one-number">
							{{aqbData.f_ypzdsj}}<i>个</i>
						</view>
					</view>
					<view class="secure-number-one">
						<view class="one-text">
							<view class="one-icon one-icon3"></view>
							处置攻击威胁IP
						</view>
						<view class="one-number">
							{{aqbData.f_czgjwxip}}<i>个</i>
						</view>
					</view>
					<view class="secure-number-one">
						<view class="one-text">
							<view class="one-icon one-icon4"></view>
							发生重大网络安全事件
						</view>
						<view class="one-number">
							{{aqbData.f_fszdwlaqsj}}<i>个</i>
						</view>
					</view>
				</view>
			</view>
			<!-- 突发事件及自然灾害保障情况 -->
			<view class="natural-disaster watermark1">
				<view class="natural-disaster-title"></view>
				<view class="paragraph" v-if="homeData.f_tfsjzj">
					<view class="paragraph-text">
						{{homeData.f_tfsjzj}}
						<view class="paragraph-bg"></view>
						<view class="paragraph-bg1"></view>
					</view>
				</view>
			</view>
			<!-- 值班 -->
			<!-- <view class="natural-disaster watermark1">
				<view class="natural-disaster-title2"></view>
				<view class="paragraph" v-if="" homeData.f_zbxx>
					<view class="paragraph-text">
						<span v-html="homeData.f_zbxx"></span>
						<view class="paragraph-bg"></view>
						<view class="paragraph-bg1"></view>
					</view>
				</view>
			</view> -->
			<img src="@/static/images/summaryReport/foot.png" class="pageFoot" alt="">
		</view>
	</view>
</template>
<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				homeData: {},
				myxgData: {},
				myqsData: [],
				zbData: {},
				bannerList: [],
				scrollLeft: 0,
				currentIndex: 0,
				intervalId: null,
				//重点
				keyScenesList: ['省际漫游', '国际漫游', '重保区域'],
				keyScenesAction: 0,
				//业务
				activeTitle: '1',
				businessList: [{
						id: '1',
						name: '个人业务'
					},
					{
						id: '2',
						name: '家庭业务'
					},
					{
						id: '3',
						name: '政企业务'
					},
					{
						id: '4',
						name: '新业务'
					}
				],
				cityList: [],
				CHBNgerenData: {}, // CHBN-个人业务
				proportion4GList: [{}],
				proportion5GList: [{}],
				app4GList: [],
				app5GList: [],
				sjswData: {}, // 手机流量
				hwlData: {}, //话务量
				dxData: {}, //短信
				wyzxgrywqsData: [],

				jkschbnData: {}, //CHBN-家庭业务-1
				jkszxfzqsData: [],
				CHBNjiatingData: {}, //CHBN-家庭业务-2
				cctv1Data: [], //CHBN-家庭业务-CCTV1

				qsData: {}, //CHBN-政企业务
				xywData: {}, //CHBN-新业务

				aqbData: {}, //网络安全保障情况
				zywlData: {}, // 主要网络
				hxwllData: {}, //
				itData: {},
				sjyhrjData: {},
				sjyhData: [],
			}
		},
		computed: {
			bannerImg() {
				return this.bannerList.length > 0 ? this.bannerList[this.currentIndex].f_url : '';
			},
			bannerText() {
				return this.bannerList.length > 0 ? this.bannerList[this.currentIndex].f_content : '';
			}
		},
		mounted() {
			this.startImageSlider();
			this.$nextTick(() => {
				this.init()
			})
		},
		beforeDestroy() {
			if (this.intervalId) {
				clearInterval(this.intervalId); // 清除定时器
			}
		},
		methods: {
			 previewImage(url) {
			  uni.previewImage({
				current: url, // 当前要显示的图片url
				urls: [url], // 需要预览的图片url列表数组
				success: () => {
				  console.log('图片预览成功');
				},
				fail: () => {
				  console.log('图片预览失败');
				}
			  });
			},
			//省 nav切换导航
			onkeyScenes(item, index) {
				this.keyScenesAction = index
				if (index == 0) {
					//重点
					this.$nextTick(() => {
						this.initEcharts01()
					})
				} else if (index == 1) {
					//重点
					this.$nextTick(() => {
						this.initEcharts02()
					})
				} else if (index == 2) {
					this.$nextTick(() => {
						this.init2()
					})
				}
			},
			startImageSlider() {
				this.intervalId = setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.bannerList.length;
					// 计算当前导航项的偏移量
					const itemOffset = this.currentIndex * 38;
					// 计算居中位置
					const scrollLeft = (300 / 2) - (70 / 2) - itemOffset;
					this.scrollLeft = itemOffset
				}, 3000); // 每3秒切换图片
			},
			onImage(item, index) {
				this.currentIndex = (index) % this.bannerList.length;
				// 计算当前导航项的偏移量
				const itemOffset = index * 38;
				// 计算居中位置
				const scrollLeft = (300 / 2) - (70 / 2) - itemOffset;
				this.scrollLeft = itemOffset
			},
			changeBusiness(value) {
				this.activeTitle = value
				this.$nextTick(() => {
					this.init()
				})
			},
			// 设置图标
			setBackground(name) {
				if (name === '抖音') {
					return 'douyin'
				} else if (name === '快手') {
					return 'kuaishou'
				} else if (name === '微信') {
					return 'weixin'
				} else if (name === '腾讯视频') {
					return 'tengxunshipin'
				} else if (name === '腾讯网') {
					return 'tengxunwang'
				} else if(name === '微信视频号'){
					return 'weixinshipin'
				} else if(name === '哔哩哔哩'){
					return 'bilibili'
				}else if(name === '小红书'){
					return 'xiaohongshu'
				}else if (name === '爱奇艺') {
					return 'aiqiyi'
				} else if (name === '优酷') {
					return 'youku'
				} else if (name === '芒果TV') {
					return 'mangguoTV'
				} else if (name === '西瓜视频') {
					return 'xiguashipin'
				} else if (name === '咪咕视频') {
					return 'migushipin'
				} 
			},
			async init() {
				//首页
				this.getjksyData()
				//轮播图片
				this.getimageData()
				//漫游相关
				this.gethxwmyxgData()
				//漫游趋势
				this.gethxwmyqsData()
				//重保
				this.getwyzxzbqyData()
				this.getaqbData()
				this.gethlwzywlData()
				//重要网络保障-IT支撑部
				this.getitzcbData()
				//手机用户
				this.getsjyhsData()
				this.getsjyhsrjData()
				// if (this.activeTitle === '1') {
					this.getwyzxsjswData()
					this.gethlwgrywData()
					this.getwyzxhwlData()
					this.getwyzxdxData()
					this.getwyzxgrywqsData()
					this.gethxwllData()

				// } else if (this.activeTitle === '2') {
					this.gethlwjtywData()
					this.gethlwcctvData()
					this.getjkszxfzqsData()
					this.getjkschbnData()
				// } else if (this.activeTitle === '3') {
					this.getzqsData()
				// } else if (this.activeTitle === '4') {
					this.gethxwxywData()
				// }
			},
			async init2() {
				// 高铁
				let option1 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 10,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高铁 4g
				let option1_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高铁
				let option2 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高铁 4g
				let option2_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速
				let option3 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速 4g
				let option3_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速
				let option4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 200,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速 4g
				let option4_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区
				let option5 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区 4g
				let option5_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区
				let option6 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 300,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区 4g
				let option6_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通
				let option7 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通 4g
				let option7_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通
				let option8 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 400,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通 4g
				let option8_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村
				let option9 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 10,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村 4g
				let option9_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村
				let option10 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村 4g
				let option10_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart1 = await this.$refs.chartRefYb1.init(echarts)
				chart1.setOption(option1);
				const chart1_4 = await this.$refs.chartRefYb1_4.init(echarts)
				chart1_4.setOption(option1_4);
				const chart2 = await this.$refs.chartRefYb2.init(echarts)
				chart2.setOption(option2);
				const chart2_4 = await this.$refs.chartRefYb2_4.init(echarts)
				chart2_4.setOption(option2_4);
				const chart3 = await this.$refs.chartRefYb3.init(echarts)
				chart3.setOption(option3);
				const chart3_4 = await this.$refs.chartRefYb3_4.init(echarts)
				chart3_4.setOption(option3_4);
				const chart4 = await this.$refs.chartRefYb4.init(echarts)
				chart4.setOption(option4);
				const chart4_4 = await this.$refs.chartRefYb4_4.init(echarts)
				chart4_4.setOption(option4_4);
				const chart5 = await this.$refs.chartRefYb5.init(echarts)
				chart5.setOption(option5);
				const chart5_4 = await this.$refs.chartRefYb5_4.init(echarts)
				chart5_4.setOption(option5_4);
				const chart6 = await this.$refs.chartRefYb6.init(echarts)
				chart6.setOption(option6);
				const chart6_4 = await this.$refs.chartRefYb6_4.init(echarts)
				chart6_4.setOption(option6_4);
				const chart7 = await this.$refs.chartRefYb7.init(echarts)
				chart7.setOption(option7);
				const chart7_4 = await this.$refs.chartRefYb7_4.init(echarts)
				chart7_4.setOption(option7_4);
				const chart8 = await this.$refs.chartRefYb8.init(echarts)
				chart8.setOption(option8);
				const chart8_4 = await this.$refs.chartRefYb8_4.init(echarts)
				chart8_4.setOption(option8_4);
				const chart9 = await this.$refs.chartRefYb9.init(echarts)
				chart9.setOption(option9);
				const chart9_4 = await this.$refs.chartRefYb9_4.init(echarts)
				chart9_4.setOption(option9_4);
				const chart10 = await this.$refs.chartRefYb10.init(echarts)
				chart10.setOption(option10);
				const chart10_4 = await this.$refs.chartRefYb10_4.init(echarts)
				chart10_4.setOption(option10_4);
			},
			//省漫游
			async initEcharts01() {
				let option = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_sjmryhs)[dataIndex]}万`,
								`较日常: ${this.myqsData.map(item=>item.f_sjmryhsrcb)[dataIndex]}%`,
								`用户数同比: ${this.myqsData.map(item=>item.f_sjmryhstb)[dataIndex]}%`,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常', '用户数同比'],
						top: '19px',
						left: '120px',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
								fontSize: 10 // 设置图例文字大小
							},
							name: "单位（万）",
							type: 'value',
						},
						 {
						      type: 'value',
						      position: 'right', // 明确指定为右侧 Y 轴
						      axisLabel: {
						        fontSize: 10,
						        color: '#707070',
						        formatter: value => `${Math.round(value)}%` // 取整并显示百分比
						      },
							  axisLine: { show: false ,// 隐藏第二条y轴的轴线 
							  }, 
							  axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
							  },
							   splitLine: { show: false ,// 隐藏第二条y轴的分割线 
							   }
						    }
					],
					series: [{
							data: this.myqsData.map(item => parseFloat(item.f_sjmryhs) || 0),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0, // 绑定到百分比 Y 轴
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_sjmryhsrcb) || 0),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1, // 绑定到百分比 Y 轴
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_sjmryhstb) || 0),
							type: 'line',
							name: '用户数同比',
							itemStyle: {
								color: '#A7ABBB',
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1, // 绑定到百分比 Y 轴
						}
					],
				}
				let option2 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_sjmcyhs)[dataIndex]}万 `,
								`较日常: ${this.myqsData.map(item=>item.f_sjmcyhsrcb)[dataIndex]}% `,
								`用户数同比: ${this.myqsData.map(item=>item.f_sjmcyhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常', '用户数同比'],
						top: '19px',
						left: '120px',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
								fontSize: 10 // 设置图例文字大小
							},
							name: "单位（万）",
							type: 'value',
						},
						 {
						      type: 'value',
						      position: 'right', // 明确指定为右侧 Y 轴
						      axisLabel: {
						        fontSize: 10,
						        color: '#707070',
						        formatter: value => `${Math.round(value)}%` // 取整并显示百分比
						      },
							  axisLine: { show: false ,// 隐藏第二条y轴的轴线 
							  }, 
							  axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
							  },
							   splitLine: { show: false ,// 隐藏第二条y轴的分割线 
							   }
						    }
					],
					series: [{
							data: this.myqsData.map(item => parseFloat(item.f_sjmcyhs)),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_sjmcyhsrcb)),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1, // 绑定到百分比 Y 轴

						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_sjmcyhstb)),
							type: 'line',
							name: '用户数同比',
							itemStyle: {
								color: '#A7ABBB',
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1, // 绑定到百分比 Y 轴
						}
					],
				}
				if (this.$refs.echartRef1 && this.$refs.echartRef2) {
					const chart1 = await this.$refs.echartRef1.init(echarts)
					chart1.setOption(option);
					const chart2 = await this.$refs.echartRef2.init(echarts)
					chart2.setOption(option2);
				}
			},
			//国漫游
			async initEcharts02() {
				let option3 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_gjjgatdqmryhs)[dataIndex]}万 `,
								`较日常: ${this.myqsData.map(item=>item.f_gjjgatdqmryhsjrc)[dataIndex]}% `,
								`用户数同比: ${this.myqsData.map(item=>item.f_gjjgatdqmryhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常', '用户数同比'],
						top: '19px',
						left: '120px',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
								fontSize: 10 // 设置图例文字大小
							},
							name: "单位（万）",
							type: 'value',
						},
						 {
						      type: 'value',
						      position: 'right', // 明确指定为右侧 Y 轴
						      axisLabel: {
						        fontSize: 10,
						        color: '#707070',
						        formatter: value => `${Math.round(value)}%` // 取整并显示百分比
						      },
							  axisLine: { show: false ,// 隐藏第二条y轴的轴线 
							  }, 
							  axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
							  },
							   splitLine: { show: false ,// 隐藏第二条y轴的分割线 
							   }
						    }
					],
					series: [{
							data: this.myqsData.map(item => parseFloat(item.f_gjjgatdqmryhs) ),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_gjjgatdqmryhsjrc) ),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,

							yAxisIndex: 1,
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_gjjgatdqmryhstb) || 0),
							type: 'line',
							name: '用户数同比',
							itemStyle: {
								color: '#A7ABBB',
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1,
						}
					],
				}
				let option4 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_gjjgatdqmcyhs)[dataIndex]}万 `,
								`较日常: ${this.myqsData.map(item=>item.f_gjjgatdqmcyhsjrc)[dataIndex]}% `,
								`用户数同比: ${this.myqsData.map(item=>item.f_gjjgatdqmcyhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常', '用户数同比'],
						top: '19px',
						left: '120px',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
								fontSize: 10 // 设置图例文字大小
							},
							name: "单位（万）",
							type: 'value',
						},
						 {
						      type: 'value',
						      position: 'right', // 明确指定为右侧 Y 轴
						      axisLabel: {
						        fontSize: 10,
						        color: '#707070',
						        formatter: value => `${Math.round(value)}%` // 取整并显示百分比
						      },
							  axisLine: { show: false ,// 隐藏第二条y轴的轴线 
							  }, 
							  axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
							  },
							   splitLine: { show: false ,// 隐藏第二条y轴的分割线 
							   }
						    }
					],
					series: [{
							data: this.myqsData.map(item => item.f_gjjgatdqmcyhs),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.myqsData.map(item => item.f_gjjgatdqmcyhsjrc),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1
						},
						{
							data: this.myqsData.map(item => item.f_gjjgatdqmcyhstb),
							type: 'line',
							name: '用户数同比',
							itemStyle: {
								color: '#A7ABBB',
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1

						}
					],
				}
				
				if (this.$refs.echartRef3 && this.$refs.echartRef4) {
					const chart3 = await this.$refs.echartRef3.init(echarts)
					chart3.setOption(option3);
					const chart4 = await this.$refs.echartRef4.init(echarts)
					chart4.setOption(option4);
				}

			},

			// 获取CHBN-个人业务数据 -01
			async getwyzxsjswData() {
				let data = await this.$api.getwyzxsjswData();
				if (data.Code == 200) {
					this.sjswData = data.Data
					this.cityList = [{
								id: '1',
								name: data.Data.f_5gflbd1ds,
								value: data.Data.f_5gflbd1z
							},
							{
								id: '2',
								name: data.Data.f_5gflbd2ds,
								value: data.Data.f_5gflbd2z
							},
							{
								id: '3',
								name: data.Data.f_5gflbd3ds,
								value: data.Data.f_5gflbd3z
							},
						],
						this.initEcharts1()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-个人业务数据 -02
			async gethlwgrywData() {
				let data = await this.$api.gethlwgrywData();
				// console.log(data, 'data')
				if (data.Code == 200) {
					this.CHBNgerenData = data.Data
					this.proportion4GList = [{
								id: '1',
								name: data.Data.f_4gllywfld1,
								value: data.Data.f_4gllywfld1zb,
								color: '#FF873C'
							},
							{
								id: '2',
								name: data.Data.f_4gllywfld2,
								value: data.Data.f_4gllywfld2zb,
								color: '#0F76FF'
							},
							{
								id: '3',
								name: data.Data.f_4gllywfld3,
								value: data.Data.f_4gllywfld3zb,
								color: '#2EB320'
							},
							{
								id: '4',
								name: data.Data.f_4gllywfld4,
								value: data.Data.f_4gllywfld4zb,
								color: '#703CFF'
							},
							{
								id: '5',
								name: data.Data.f_4gllywfld5,
								value: data.Data.f_4gllywfld5zb,
								color: '#2936AE'
							}
						],
						this.proportion5GList = [{
								id: '1',
								name: data.Data.f_5gllywfld1,
								value: data.Data.f_5gllywfld1zb,
								color: '#FF873C'
							},
							{
								id: '2',
								name: data.Data.f_5gllywfld2,
								value: data.Data.f_5gllywfld2zb,
								color: '#0F76FF'
							},
							{
								id: '3',
								name: data.Data.f_5gllywfld3,
								value: data.Data.f_5gllywfld3zb,
								color: '#2EB320'
							},
							{
								id: '4',
								name: data.Data.f_5gllywfld4,
								value: data.Data.f_5gllywfld4zb,
								color: '#703CFF'
							},
							{
								id: '5',
								name: data.Data.f_5gllywfld5,
								value: data.Data.f_5gllywfld5zb,
								color: '#2936AE'
							}
						],
						this.app4GList = [{
								id: '1',
								name: data.Data.f_4gllywd1,
								value: data.Data.f_4gllywd1zb,
								color: '#FF873C'
							},
							{
								id: '2',
								name: data.Data.f_4gllywd2,
								value: data.Data.f_4gllywd2zb,
								color: '#0F76FF'
							},
							{
								id: '3',
								name: data.Data.f_4gllywd3,
								value: data.Data.f_4gllywd3zb,
								color: '#2EB320'
							},
							{
								id: '4',
								name: data.Data.f_4gllywd4,
								value: data.Data.f_4gllywd4zb,
								color: '#703CFF'
							},
							{
								id: '5',
								name: data.Data.f_4gllywd5,
								value: data.Data.f_4gllywd5zb,
								color: '#2936AE'
							}
						],
						this.app5GList = [{
								id: '1',
								name: data.Data.f_5gllywd1,
								value: data.Data.f_5gllywd1zb,
								color: '#FF873C'
							},
							{
								id: '2',
								name: data.Data.f_5gllywd2,
								value: data.Data.f_5gllywd2zb,
								color: '#0F76FF'
							},
							{
								id: '3',
								name: data.Data.f_5gllywd3,
								value: data.Data.f_5gllywd3zb,
								color: '#2EB320'
							},
							{
								id: '4',
								name: data.Data.f_5gllywd4,
								value: data.Data.f_5gllywd4zb,
								color: '#703CFF'
							},
							{
								id: '5',
								name: data.Data.f_5gllywd5,
								value: data.Data.f_5gllywd5zb,
								color: '#2936AE'
							}
						],
						this.initEcharts3()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-个人业务数据 -03
			async getwyzxhwlData() {
				let data = await this.$api.getwyzxhwlData();
				if (data.Code == 200) {
					this.hwlData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-个人业务数据 -04
			async getwyzxdxData() {
				let data = await this.$api.getwyzxdxData();
				if (data.Code == 200) {
					this.dxData = data.Data
					this.initEcharts7()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 个人业务三个双柱状图数据
			async getwyzxgrywqsData() {
				let data = await this.$api.getwyzxgrywqsData();
				if (data.Code == 200) {
					this.wyzxgrywqsData = data.Data
					this.initEcharts()
					this.initEcharts5()
					this.initEcharts6()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-家庭业务业务数据-1
			async getjkschbnData() {
				let data = await this.$api.getjkschbnData();
				if (data.Code == 200) {
					this.jkschbnData = data.Data
					this.initEcharts13()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-家庭业务业务数据-1-全网宽带峰值在线用户数
			async getjkszxfzqsData() {
				let data = await this.$api.getjkszxfzqsData();
				if (data.Code == 200) {
					this.jkszxfzqsData = data.Data
					this.initEcharts12()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},

			// 获取CHBN-家庭业务业务数据-2
			async gethlwjtywData() {
				let data = await this.$api.gethlwjtywData();
				if (data.Code == 200) {
					this.CHBNjiatingData = data.Data
					this.initEcharts15()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},

			// 获取CHBN-家庭业务业务数据-2- CCTV1日累计收视用户数
			async gethlwcctvData() {
				let data = await this.$api.gethlwcctvData();
				if (data.Code == 200) {
					this.cctv1Data = data.Data
					this.initEcharts18()
					this.initEcharts21()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-政企业务
			async getzqsData() {
				let data = await this.$api.getzqsData();
				if (data.Code == 200) {
					this.qsData = data.Data
					this.initEcharts19()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取CHBN-新业务
			async gethxwxywData() {
				let data = await this.$api.gethxwxywData();
				if (data.Code == 200) {
					this.xywData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 网络安全保障情况
			async getaqbData() {
				let data = await this.$api.getaqbData();
				if (data.Code == 200) {
					this.aqbData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 首页
			async getjksyData() {
				let data = await this.$api.getjksyData();
				if (data.Code == 200) {
					// console.log('首页', data.Data)
					let str = data.Data.f_syzj
					this.homeData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 首页轮播图片
			async getimageData() {
				let data = await this.$api.getimageData();
				if (data.Code == 200) {
					// console.log('首页', data.Data)
					this.bannerList = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 漫游相关
			async gethxwmyxgData() {
				let data = await this.$api.gethxwmyxgData();
				if (data.Code == 200) {
					// console.log('漫游相关', data.Data)
					this.myxgData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 漫游趋势
			async gethxwmyqsData() {
				let data = await this.$api.gethxwmyqsData();
				if (data.Code == 200) {
					// console.log('漫游趋势', data.Data)
					this.myqsData = data.Data
					//重点
					this.initEcharts01()
					this.initEcharts02()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 重保
			async getwyzxzbqyData() {
				let data = await this.$api.getwyzxzbqyData();
				if (data.Code == 200) {
					// console.log('重保', data.Data)
					this.zbData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 重要网络保障
			async gethlwzywlData() {
				let data = await this.$api.gethlwzywlData();
				if (data.Code == 200) {
					this.zywlData = data.Data
					this.initEcharts8()
					this.initEcharts10()
					this.initEcharts11()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 重要网络保障-IT支撑部
			async getitzcbData() {
				let data = await this.$api.getitzcbData();
				if (data.Code == 200) {
					this.itData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 手机用户数日均
			async getsjyhsrjData() {
				let data = await this.$api.getsjyhsrjData();
				if (data.Code == 200) {
					this.sjyhrjData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 手机用户
			async getsjyhsData() {
				let data = await this.$api.getsjyhsData();
				if (data.Code == 200) {
					// console.log('data.Data手机用户手机用户',data.Data)
					this.sjyhData = data.Data
					this.initEcharts2()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			
			// 双堆叠图
			async initEcharts() {
				let option = {
					grid: {
						top: '50rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'2025 5G流量： ' +
								this.wyzxgrywqsData.map(item => item.f_5gll)[params.dataIndex] +
								'TB' +
								'\n' +
								'2025 4G流量： ' +
								this.wyzxgrywqsData.map(item => item.f_4gll)[params.dataIndex] +
								'TB' +
								'\n' +
								'2024 5G流量： ' +
								this.wyzxgrywqsData.map(item => item.f_2024n5gll)[params.dataIndex] +
								'TB' +
								'\n' +
								'2024 4G流量： ' +
								this.wyzxgrywqsData.map(item => item.f_2024n4gll)[params.dataIndex] +
								'TB'
							)
						}
					},
					legend: {
						data: ['2025 5G流量', '2025 4G流量', '2024 5G流量', '2024 4G流量'],
						top: '0rpx',
						left: 'center',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.wyzxgrywqsData.map(item => item.f_rq),
						axisLabel: {
							interval: 0,
							fontSize: 9,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{
						// min: 0,
						// max: 100,
						// interval: 25,
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 TB",
						type: 'value',
					}],
					series: [{
							data: this.wyzxgrywqsData.map(item => item.f_5gll),
							type: 'bar',
							name: '2025 5G流量',
							stack: '2025',
							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: this.wyzxgrywqsData.map(item => item.f_4gll),
							type: 'bar',
							name: '2025 4G流量',
							stack: '2025',
							itemStyle: {
								color: '#5AC8FB',
							},
							barWidth: 6,
						},
						{
							data: this.wyzxgrywqsData.map(item => item.f_2024n5gll),
							type: 'bar',
							name: '2024 5G流量',
							stack: '2024',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: this.wyzxgrywqsData.map(item => item.f_2024n4gll),
							type: 'bar',
							name: '2024 4G流量',
							stack: '2024',
							itemStyle: {
								color: '#FFCC00',
							},
							barWidth: 6,
						}
					],
				};
				const chart = await this.$refs.chartRef.init(echarts)
				chart.setOption(option);
			},
			//手机用户柱状折线
			async initEcharts2() {
				let option5 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.sjyhData.map(item=>item.f_sjyhs)[dataIndex]}万 `,
								`较日常: ${this.sjyhData.map(item=>item.f_sjyhsrcb)[dataIndex]}% `,
								`用户数同比: ${this.sjyhData.map(item=>item.f_sjyhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.sjyhData.map(item => item.f_sj),
						axisLabel: {
							rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常', '用户数同比'],
						top: '19px',
						left: '120px',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
							},
							name: "单位（万）",
							type: 'value',
						},
						 {
						      type: 'value',
						      position: 'right', // 明确指定为右侧 Y 轴
						      axisLabel: {
						        fontSize: 10,
						        color: '#707070',
						        formatter: value => `${Math.round(value)}%` // 取整并显示百分比
						      },
							  axisLine: { show: false ,// 隐藏第二条y轴的轴线 
							  }, 
							  axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
							  },
							   splitLine: { show: false ,// 隐藏第二条y轴的分割线 
							   }
						    }
					],
					series: [{
							data: this.sjyhData.map(item => item.f_sjyhs),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.sjyhData.map(item => item.f_sjyhsrcb),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1
						},
						{
							data: this.sjyhData.map(item => item.f_sjyhstb),
							type: 'line',
							name: '用户数同比',
							itemStyle: {
								color: '#A7ABBB',
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1
				
						}
					],
				}
				
				const chart5 = await this.$refs.echartRef5.init(echarts)
				chart5.setOption(option5);
			},
			// 环形图/ 5g分流比日均
			async initEcharts1() {
				let option = {
					series: [{
						name: '日均',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.sjswData.f_5gflbrj,
								name: '部分完成',
								itemStyle: {
									color: '#fd3a2e'
								}
							},
							{
								value: 100 - this.sjswData.f_5gflbrj,
								name: '已完成',
								itemStyle: {
									color: '#FECEC9'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.sjswData.f_5gflbrj + '%',
							textAlign: 'center',
							fill: '#fd3a2e',
							fontSize: 16
						}
					}]
				};
				const chart = await this.$refs.chartRef1.init(echarts)
				chart.setOption(option);
			},
			// http访问成功率 两个环形图
			async initEcharts3() {
				let option = {
					series: [{
						name: '成功率',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.CHBNgerenData.f_4gfwcgl,
								name: '4GHTTP访问成功率',
								itemStyle: {
									color: '#B49413'
								}
							},
							{
								value: 100 - this.CHBNgerenData.f_4gfwcgl,
								name: '4GHTTP访问失败率',
								itemStyle: {
									color: '#C4C3C2'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.CHBNgerenData.f_4gfwcgl + '%',
							textAlign: 'center',
							fill: '#B49413',
							fontSize: 14
						}
					}]
				};
				const chart = await this.$refs.chartRef3.init(echarts)
				chart.setOption(option);

				let option1 = {
					series: [{
						name: '成功率',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.CHBNgerenData.f_5gfwcgl,
								name: '5GHTTP访问成功率',
								itemStyle: {
									color: '#B49413'
								}
							},
							{
								value: 100 - this.CHBNgerenData.f_5gfwcgl,
								name: '5GHTTP访问失败率',
								itemStyle: {
									color: '#C4C3C2'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.CHBNgerenData.f_5gfwcgl + '%',
							textAlign: 'center',
							fill: '#007AFF',
							fontSize: 14
						}
					}]
				};
				const chart1 = await this.$refs.chartRef4.init(echarts)
				chart1.setOption(option1);
			},
			// 获取CHBN-个人业务数据 -01 （新接口）
			async gethxwllData() {
				let data = await this.$api.gethxwllData();
				if (data.Code == 200) {
					this.hxwllData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 第二双堆叠图
			async initEcharts5() {
				 // 去掉数组的第一条数据
				 const slicedData = this.wyzxgrywqsData.slice(1);
				let option = {
					grid: {
						top: '30rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'4G话务量： ' +
								this.wyzxgrywqsData.map(item => item.f_4ghwl)[params.dataIndex] +
								'万ERL' +
								'\n' +
								'5G话务量： ' +
								this.wyzxgrywqsData.map(item => item.f_5ghwl)[params.dataIndex] +
								'万ERL'

							)
						}
					},
					legend: [
						{
							data: ['4G话务量', '5G话务量'],
							top: '0rpx',
							right: '50rpx',
							itemWidth: 10, // 设置图例项的宽度
							itemHeight: 10, // 设置图例项的高度
							textStyle: {
								color: '#5C5C5C', // 设置图例文字颜色
								fontSize: 10 // 设置图例文字大小
							}
						}
					],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: slicedData.map(item => item.f_rq),
						axisLabel: {
							interval: 0,
							fontSize: 9,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{

						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 万ERL",
						type: 'value',
					}],
					series: [{
							data: slicedData.map(item => item.f_4ghwl),
							type: 'bar',
							name: '4G话务量',

							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: slicedData.map(item => item.f_5ghwl),
							type: 'bar',
							name: '5G话务量',
							itemStyle: {
								color: '#5AC8FB',
							},
							barWidth: 6,
						},
					],
				};
				const chart = await this.$refs.chartRef5.init(echarts)
				chart.setOption(option);
			},
			async initEcharts6() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'2024： ' +
								this.wyzxgrywqsData.map(item => item.f_2024ndx)[params.dataIndex] +
								'亿条'+
								'\n' +
								'2025： ' +
								this.wyzxgrywqsData.map(item => item.f_dx)[params.dataIndex] +
								'亿条' 
								

							)
						}
					},
					legend: [{
						data: ['2024', '2025'],
						top: '0rpx',
						right: '50rpx',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.wyzxgrywqsData.map(item => item.f_rq),
						axisLabel: {
							interval: 0,
							fontSize: 9,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{

						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 亿条",
						type: 'value',
					}],
					series: [
						{
							data: this.wyzxgrywqsData.map(item => item.f_2024ndx),
							type: 'bar',
							name: '2024',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						},{
							data: this.wyzxgrywqsData.map(item => item.f_dx),
							type: 'bar',
							name: '2025',
							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						}
					],
				};
				const chart = await this.$refs.chartRef6.init(echarts)
				chart.setOption(option);
			},
			async initEcharts7() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'2024: ' + [this.dxData.f_2024nhydxrjz, this.dxData.f_2024nmwdxrjz, this
									.dxData
									.f_2024nddddxrjz
								][params.dataIndex] +
								'亿条' +
								'\n' +
								'2025: ' + [this.dxData.f_hydxrj, this.dxData.f_mwdxrj, this.dxData
									.f_ddddxrj
								][params.dataIndex] +
								'亿条'
								

							)
						}
					},
					legend: [{
						data: ['2024', '2025'],
						top: '0rpx',
						right: '50rpx',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: ['行业短信日均', '梦网短信日均', '点对点短信日均'],
						axisLabel: {
							// fontSize: 9, // 减小字体字号
							interval: 0 // 强制展示所有 x 轴标签
						}
					},
					yAxis: [{

						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 亿条",
						type: 'value',
					}],
					series: [
						{
							data: [this.dxData.f_2024nhydxrjz, this.dxData.f_2024nmwdxrjz, this.dxData
								.f_2024nddddxrjz
							],
							type: 'bar',
							name: '2024',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: [this.dxData.f_hydxrj, this.dxData.f_mwdxrj, this.dxData
								.f_ddddxrj
							],
							type: 'bar',
							name: '2025',
							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						},
					],
				};
				const chart = await this.$refs.chartRef7.init(echarts)
				chart.setOption(option);
			},
			// 速度图
			async initEcharts8() {
				let option = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#E8CEC5'],
								]
							}
						},
						itemStyle: {
							color: '#FF3B2F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#E8CEC5',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							fontSize: 16,
							lineHeight: 28,
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|s}`;
							},
							rich: {
								value: {
									color: '#FF3B2F',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#FF3B2F',
									fontSize: 15,
									padding: [-20, 0, 0, -2] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zywlData.f_wzpjspsy,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart = await this.$refs.chartRef8.init(echarts)
				chart.setOption(option);
				let option1 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#E8CEC5'],
								]
							}
						},
						itemStyle: {
							color: '#FF3B2F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#E8CEC5',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							fontSize: 16,
							lineHeight: 28,
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|s}`;
							},
							rich: {
								value: {
									color: '#FF3B2F',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#FF3B2F',
									fontSize: 15,
									padding: [-20, 0, 0, -2] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},

						data: [{
							value: this.zywlData.f_spbfsy,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart1 = await this.$refs.chartRef9.init(echarts)
				chart1.setOption(option1);
			},
			// 日常/ 春节均值
			async initEcharts10() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							if (params.name == '日常') {
								return '日常: ' + this.zywlData.f_wzpjspsyrcz + 's'
							} else {
								return '春节日均: ' + this.zywlData.f_wzpjspsy + 's'
							}
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: ['日常', '春节日均'],
						axisLabel: {
							// fontSize: 9, // 减小字体字号
							interval: 0 // 强制展示所有 x 轴标签
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 12
						},
						name: "单位 s",
						type: 'value',
						splitNumber: 4 // 设置刻度分4份
					}],

					series: [{

						data: [{
								value: this.zywlData.f_wzpjspsyrcz,
								itemStyle: {
									color: '#4BCEB3'
								}
							},
							{
								value: this.zywlData.f_wzpjspsy,
								itemStyle: {
									color: '#FF9501'
								}
							}
						],
						type: 'bar',
						name: '2025',
						barWidth: 8,
					}]
				};
				const chart = await this.$refs.chartRef10.init(echarts)
				chart.setOption(option);
			},
			async initEcharts11() {
				let option = {
					grid: {
						top: '30px',
						bottom: '30px',
						left: '50px'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							if (params.name == '日常') {
								return '日常: ' + this.zywlData.f_spbfsyrcz + 's'
							} else {
								return '春节日均: ' + this.zywlData.f_spbfsy + 's'
							}
						}
					},

					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: ['日常', '春节日均'],
						axisLabel: {
							// fontSize: 9, // 减小字体字号
							interval: 0 // 强制展示所有 x 轴标签
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 10
						},
						name: "单位 s",
						type: 'value',
						splitNumber: 4 // 设置刻度分4份
					}],
					// this.zywlData.f_spbfsyrcz this.zywlData.f_spbfsy
					series: [{
						data: [{
								value: this.zywlData.f_spbfsyrcz,
								itemStyle: {
									color: '#4BCEB3'
								}
							},
							{
								value: this.zywlData.f_spbfsy,
								itemStyle: {
									color: '#FF9501'
								}
							}
						],
						type: 'bar',
						name: '2025',
						barWidth: 8,
					}]
				};
				const chart = await this.$refs.chartRef11.init(echarts)
				chart.setOption(option);
			},
			async initEcharts12() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'2025: ' +
								this.jkszxfzqsData.map(item => item.f_jkzxfzyhs)[params.dataIndex] +
								'万' +
								'\n' +
								'2024: ' +
								this.jkszxfzqsData.map(item => item.f_2024njkzxfzyhs)[params.dataIndex] +
								'万'

							)
						}
					},
					legend: [{
						data: ['2025', '2024'],
						top: '0rpx',
						right: '50rpx',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.jkszxfzqsData.map(item => item.f_rq),
						axisLabel: {
							interval: 0,
							fontSize: 9,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{

						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 万",
						type: 'value',
					}],
					series: [{
							data: this.jkszxfzqsData.map(item => item.f_jkzxfzyhs),
							type: 'bar',
							name: '2025',
							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						},

						{
							data: this.jkszxfzqsData.map(item => item.f_2024njkzxfzyhs),
							type: 'bar',
							name: '2024',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						},

					],
				};
				const chart = await this.$refs.chartRef12.init(echarts)
				chart.setOption(option);
			},
			// http访问成功率 两个环形图
			async initEcharts13() {
				let option = {
					series: [{
						name: '及时率',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.jkschbnData.f_jkzjjsl,
								name: '部分完成',
								itemStyle: {
									color: '#B49413'
								}
							},
							{
								value: 100 - this.jkschbnData.f_jkzjjsl,
								name: '已完成',
								itemStyle: {
									color: '#C4C3C2'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.jkschbnData.f_jkzjjsl + '%',
							textAlign: 'center',
							fill: '#B49413',
							fontSize: 14
						}
					}]
				};
				const chart = await this.$refs.chartRef13.init(echarts)
				chart.setOption(option);

				let option1 = {
					series: [{
						name: '及时率',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.jkschbnData.f_tscljsl,
								name: '部分完成',
								itemStyle: {
									color: '#007AFF'
								}
							},
							{
								value: 100 - this.jkschbnData.f_tscljsl,
								name: '已完成',
								itemStyle: {
									color: '#C4C3C2'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.jkschbnData.f_tscljsl + '%',
							textAlign: 'center',
							fill: '#007AFF',
							fontSize: 14
						}
					}]
				};
				const chart1 = await this.$refs.chartRef14.init(echarts)
				chart1.setOption(option1);
			},
			// 三个速度图
			async initEcharts15() {
				let option = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#999999',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							fontSize: 13,
							offsetCenter: [0, 0],
							valueAnimation: true,
							formatter: function(value) {
								return value + '%'
							},
							color: '#13C05F'
						},
						data: [{
							value: this.CHBNjiatingData.f_hlwdsrjbfcgl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart = await this.$refs.chartRef15.init(echarts)
				chart.setOption(option);
				let option1 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#DBD4C2'],
								]
							}
						},
						itemStyle: {
							color: '#D66755', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#999999',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							fontSize: 13,
							offsetCenter: [0, 0],
							valueAnimation: true,
							formatter: function(value) {
								return value + '%'
							},
							color: '#D66755'
						},
						data: [{
							value: this.CHBNjiatingData.f_wkdsczb,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart1 = await this.$refs.chartRef16.init(echarts)
				chart1.setOption(option1);
				let option2 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0BDDA'],
								]
							}
						},
						itemStyle: {
							color: '#094AFF', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#999999',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							fontSize: 13,
							offsetCenter: [0, 0],
							valueAnimation: true,
							formatter: function(value) {
								return value + '%'
							},
							color: '#094AFF'
						},
						data: [{
							value: this.CHBNjiatingData.f_epgcgl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart2 = await this.$refs.chartRef17.init(echarts)
				chart2.setOption(option2);
			},
			async initEcharts18() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'2025: ' +
								this.cctv1Data.map(item => item.f_ljssyhs)[params.dataIndex] +
								'万' +
								'\n' +
								'2024: ' +
								this.cctv1Data.map(item => item.f_2024nljssyhs)[params.dataIndex] +
								'万'
							)
						}
					},
					legend: [{
						data: ['2025', '2024'],
						top: '0rpx',
						right: '50rpx',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.cctv1Data.map(item => item.f_rq),
						axisLabel: {
							interval: 0,
							fontSize: 9,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{

						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 万",
						type: 'value',
					}],
					series: [{
							data: this.cctv1Data.map(item => item.f_ljssyhs),
							type: 'bar',
							name: '2025',
							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						},

						{
							data: this.cctv1Data.map(item => item.f_2024nljssyhs),
							type: 'bar',
							name: '2024',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						},

					],
				};
				const chart = await this.$refs.chartRef18.init(echarts)
				chart.setOption(option);
			},
			// http访问成功率 两个环形图
			async initEcharts19() {
				let option = {
					series: [{
						name: '成功率',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.qsData.f_skzjjsl,
								name: '部分完成',
								itemStyle: {
									color: '#B49413'
								}
							},
							{
								value: 100 - this.qsData.f_skzjjsl,
								name: '已完成',
								itemStyle: {
									color: '#C4C3C2'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.qsData.f_skzjjsl + '%',
							textAlign: 'center',
							fill: '#B49413',
							fontSize: 14
						}
					}]
				};
				const chart = await this.$refs.chartRef19.init(echarts)
				chart.setOption(option);

				let option1 = {
					series: [{
						name: '成功率',
						type: 'pie',
						radius: ['65%', '90%'], // 环形图的内外半径
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'outside' // 标签显示在外侧
						},
						labelLine: {
							show: false,
							length: 10,
							length2: 20
						},
						data: [{
								value: this.qsData.f_sktscljsl,
								name: '部分完成',
								itemStyle: {
									color: '#007AFF'
								}
							},
							{
								value: 100 - this.qsData.f_sktscljsl,
								name: '已完成',
								itemStyle: {
									color: '#C4C3C2'
								}
							}
						]
					}],
					graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.qsData.f_sktscljsl + '%',
							textAlign: 'center',
							fill: '#007AFF',
							fontSize: 14
						}
					}]
				};
				const chart1 = await this.$refs.chartRef20.init(echarts)
				chart1.setOption(option1);
			},
			async initEcharts21() {
				let option = {
					grid: {
						top: '70rpx',
						bottom: '30rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'2025： ' +
								this.cctv1Data.map(item => item.f_hlwdsbfyhs)[params.dataIndex] + '万' +
								'\n' +
								'2024： ' +
								this.cctv1Data.map(item => item.f_2024nhlwdsbfyhs)[params.dataIndex] + '万' 
							)
						}
					},
					legend: [
						{
							data: ['2025','2024'],
							top: '20rpx', // 根据需要调整第二组图例的位置
							left: 'center',
							itemWidth: 10, // 设置图例项的宽度
							itemHeight: 10, // 设置图例项的高度
							textStyle: {
								color: '#5C5C5C', // 设置图例文字颜色
								fontSize: 10 // 设置图例文字大小
							}
						}
					],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.cctv1Data.map(item => item.f_rq),
						axisLabel: {
							interval: 0,
							fontSize: 9,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{

						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 万",
						type: 'value',
					}],
					series: [{
							data: this.cctv1Data.map(item => item.f_hlwdsbfyhs),
							type: 'bar',
							name: '2025',
							itemStyle: {
								color: '#4BCEB3',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: this.cctv1Data.map(item => item.f_2024nhlwdsbfyhs),
							type: 'bar',
							name: '2024',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						},
					],
				};
				const chart = await this.$refs.chartRef21.init(echarts)
				chart.setOption(option);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		min-height: 100vh;
		background: url(@/static/images/summaryReport/bg/bg1.png) no-repeat;
		background-size: 750rpx;
		background-position: 0 -34rpx;
		background-color: #EC3826;
		display: grid;

		.content_nr {
			padding-bottom: 40rpx;
		}

		.tipsNr {
			width: 710rpx;
			min-height: 710rpx;
			margin: 990rpx auto 0;
			background: url(@/static/images/summaryReport/bg/bg3.png) no-repeat;
			background-size: 710rpx 100%;
			position: relative;

			.tipsNr_dl {
				width: 80rpx;
				position: absolute;
				top: 50rpx;
				left: 60rpx;
			}

			.tipsNr_topBg {
				width: 740rpx;
				position: absolute;
				top: -30rpx;
				left: -15rpx;
			}

			.tipsNr_bomBg {
				width: 740rpx;
				position: absolute;
				bottom: -30rpx;
				left: -15rpx;
			}

			.tipsNr_title {
				color: #970707;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 70rpx;
				display: inline-block;
				margin-left: 160rpx;
			}

			.tipsNr_nr {
				width: 580rpx;
				color: #970707;
				font-size: 28rpx;
				margin-top: 50rpx;
				display: inline-block;
				margin-left: 80rpx;
				margin-bottom: 26rpx;
				text-indent: 58rpx;
			}

			.guaranteeTasks {
				width: 580rpx;
				margin: 80rpx 66rpx 18rpx 66rpx;
				border-radius: 16rpx;
				border: 2rpx solid #EC3826;
				position: relative;
				display: inline-block;

				.guaranteeTasks_bg {
					width: 580rpx;
					position: absolute;
					bottom: 0;
					left: 0;
				}

				.guaranteeTasks_titleBg {
					width: 458rpx;
					height: 132rpx;
					background: url(@/static/images/summaryReport/bg/bg9.png) no-repeat;
					background-size: 458rpx 130rpx;
					display: flex;
					align-items: center;
					margin: 0 auto;
					margin-top: -70rpx;

					.guaranteeTasks_topImg {
						width: 68rpx;
						margin-left: 38rpx;
					}

					.guaranteeTasks_topTitle {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;
						font-style: normal;
						text-transform: none;
						margin-left: 20rpx;
					}
				}

				.guaranteeTasks_nr {
					display: block;

					.guaranteeTasks_item {
						margin: 0 auto;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						width: 436rpx;
						height: 50rpx;
						background: #F3EBDB;
						border-radius: 16rpx;
						border: 1rpx solid #FFFFFF;

						.item_icon {
							width: 32rpx;
							margin-left: 24rpx;
							margin-right: 12rpx;
						}

						.item_title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #000000;
							margin-right: auto;
						}

						.item_num {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FF3B2F;
							line-height: 24rpx;
							margin-right: 24rpx;
						}
					}
				}

				.guaranteeTasks_nr2 {
					width: 436rpx;
					margin: 16rpx auto;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					position: relative;

					.guaranteeTasks_nr2_bg {
						width: 72rpx;
						position: absolute;
						top: 90rpx;
						left: 184rpx;
					}

					.guaranteeTasks_item2 {
						width: 210rpx;
						height: 110rpx;
						border-radius: 16rpx;
						background: #F3EBDB;
						margin-top: 10rpx;

						.item2_icon_num {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 16rpx;

							.item_icon {
								width: 43rpx;
								margin-right: 20rpx;
							}

							.item_num {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 34rpx;
								color: #FF3B2F;
								line-height: 24rpx;
								margin-right: 24rpx;
							}
						}

						.item2_title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							margin-top: 10rpx;
							text-align: center;
						}
					}
				}

				.networkQuality {
					width: 468rpx;
					margin: 4rpx auto 32rpx;

					.networkQuality_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #0CB480;
						line-height: 42rpx;
						text-align: center;
					}

					.networkQuality_nr {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

			}

			.bannerView {
				width: 590rpx;
				border-radius: 13rpx;
				display: inline-block;
				margin-left: 60rpx;
				margin-bottom: 60rpx;
				background: url(@/static/images/summaryReport/bg/bg19.png) no-repeat;
				background-size: 590rpx 327rpx;

				.bannerView_img_title {
					width: 590rpx;
					height: 328rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					padding: 6rpx;

					.bannerView_img {
						width: 540rpx;
						height: 230rpx;
						margin: 0 auto ;
						display: block;
						object-fit: cover; /* 或 contain */
					}

					.bannerView_title {
						width: 540rpx;
						margin: 0 auto;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFEBD1;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				.bannerView_imgList {
					display: flex;
					align-items: center;
					margin-top: 14rpx;
					.bannerView_imgList_item {
						margin-right: 20rpx;
						width: 130rpx;
						display: inline-block;

						.bannerView_imgList_itemImg {
							width: 110rpx;
							height: 80rpx;
							border: 10rpx solid #F7D7B8;
						}
					}
				}
			}
		}

		.keyScenes {
			width: 710rpx;
			margin: 70rpx auto 0;
			background-color: #fffbf1;
			border: 10rpx #FFCFA5 solid;
			border-radius: 20rpx;
			position: relative;
			padding-bottom: 50rpx;

			.keyScenes_topBg {
				width: 500rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-top: -26rpx;
				display: block;
			}

			.keyScenes_nav {
				margin-top: 7rpx;
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.keyScenes_nav_item {
					width: 150rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: url(@/static/images/summaryReport/tapbg2.png) no-repeat;
					background-size: 100% 100%;
					color: #000000;
					text-shadow: 3rpx 3rpx 0 #FFFFFF;
					text-stroke: 1px rgba(0, 0, 0, 0);
				}

				.keyScenes_active {
					background: url(@/static/images/summaryReport/tapbg1.png) no-repeat !important;
					background-size: 100% 100% !important;
					color: #FFFFFF;
					text-shadow: 3rpx 3rpx 0 #000000;
					text-stroke: 1px rgba(0, 0, 0, 0);
				}
			}

			.keyScenes_nr1,
			.keyScenes_nr3 {
				.business-one {
					margin-top: 20rpx;
					width: 100%;
					background-color: #FDE8DC;
					border: 2rpx #FDE8DC dashed;
					display: flex;
					align-items: center;

					.business-one-left {
						width: 117rpx;
						height: 117rpx;
						background: url(@/static/images/summaryReport/pic16.png) no-repeat;
						background-size: 70% 100%;
					}

					.keyScenes3bg {
						width: 117rpx;
						height: 117rpx;
						background: url(@/static/images/summaryReport/pic0.png) no-repeat;
						background-size: 100% 100%;
					}

					.business-one-center {
						margin-left: 33rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #D61515;
						margin: 24rpx;
					}

					.business-one-right {
						font-weight: normal;
						font-size: 48rpx;
						color: #D61515;
					}
				}
			}

			.compare {
				margin-top: 67rpx;
				padding: 0 0rpx 0 60rpx;

				.draw {
					display: flex;
					margin-top: 34rpx;

					.draw-left {
						width: 50%;

						.draw-left-top {
							font-weight: 400;
							font-size: 30rpx;
							color: #000000;
						}

						.draw-left-bottom {
							display: flex;
							align-items: center;
							margin: 17rpx 0rpx 0rpx 10rpx;

							.draw-left-bottom-icon {
								margin-right: 12rpx;
								width: 56rpx;
								height: 56rpx;
								background: url(@/static/images/summaryReport/icon/icon5.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-left-bottom-font {
								font-weight: bold;
								font-size: 48rpx;
								color: #FF3B2F;
							}

							.draw-left-bottom-unit {
								font-weight: 400;
								font-size: 30rpx;
								color: #FF3B2F;
							}
						}
					}

					.draw-right {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: right;
						margin-right: 20rpx;

						.draw-right-daily {
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							text-align: center;

							.draw-right-icon1 {
								line-height: 100rpx;
								font-size: 26rpx;
								font-weight: bold;
								color: #FFFFFF;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic3.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-right-icon2 {
								line-height: 100rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								font-weight: bold;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic4.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-right-icon3 {
								line-height: 100rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								font-weight: bold;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic12.png) no-repeat !important;
								background-size: 100% 100% !important;
							}
						}
					}
				}
			}

			.threeChart {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				width: 100%;

				.threeChart-item {
					width: 33%;
					height: 200rpx;
					text-align: center;

					.threeChart-item-casing {
						height: 160rpx;
						width: 100%;
					}

					.threeChart-item-text {
						height: 40rpx;
						width: 100%;
					}
				}
			}

			

			.keyScenes_top3 {
				display: block;
				width: 580rpx;
				margin: 0 auto;
				position: relative;

				.keyScenes_top3_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #8D0B0B;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.keyScenes_top3_icon {
					width: 120rpx;
					height: 120rpx;
					position: absolute;
					top: -40rpx;
					right: 80rpx;
				}

				.keyScenes_top3_nr {
					display: block;
					margin-top: 30rpx;

					.keyScenes_top3_nrItem {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.nrItem_index {
							width: 86rpx;
							height: 54rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 54rpx;
							background: url(@/static/images/summaryReport/pic9.png) no-repeat;
							background-size: 100% 100%;
							margin-right: 20rpx;
						}

						.nrItem_name {
							
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							margin-right: 10rpx;
						}

						.nrItem_num {
							width: 70rpx;
							font-family: Roboto, Roboto;
							font-weight: bold;
							font-size: 22rpx;
							color: #F37A00;
							margin-right: 15rpx;
						}

						.nrItem_jdt {
							width: 166rpx;
							height: 19rpx;
							background: linear-gradient(90deg, #FAD1A3 0%, #FF873C 100%);
							border-radius: 8rpx;
						}
					}
				}
			}

			.keyScenes_nr3 {
				.banner_gt {
					width: 650rpx;
					height: 86rpx;
					margin: 24rpx auto;
					display: block;
				}

				.gaotie_view {
					width: 649rpx;
					height: 440rpx;
					border-radius: 16rpx;
					margin: 0 auto;
					background: center center url(@/static/images/summaryReport/bg/zbBg.png) no-repeat;
					background-size: 649rpx 440rpx;

					.gt_logo {
						width: 126rpx;
						height: 45rpx;
						line-height: 45rpx;
						text-align: center;
						background: #FF3B2F;
						font-size: 26rpx;
						color: #FFFFFF;
						border-radius: 16rpx 0rpx 16rpx 0rpx;
					}

					.proportion1 {
						display: flex;
						justify-content: center;
						margin-top: 20rpx;

						.proportion1-item {
							width: 50%;
						}

						.font {
							width: 70%;
							text-align: center;
							margin: 0 auto;
							color: #A7ABBB;
							font-size: 24rpx;
						}
						.maxZ{
							font-size: 20rpx;
							margin-bottom: 20rpx;
						}
					}

					.keyScenes_nr3_title_num {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 48rpx;

						.keyScenes_nr3_title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #5F6475;
							text-stroke: 1px rgba(0, 0, 0, 0);
							font-style: normal;
							text-transform: none;
							margin-right: 14rpx;
						}

						.keyScenes_nr3_num {
							font-family: Roboto, Roboto;
							font-weight: bold;
							font-size: 28rpx;
							color: #007AFF;
							text-stroke: 1px rgba(0, 0, 0, 0);
							font-style: normal;
							text-transform: none;
							-webkit-text-stroke: 1px rgba(0, 0, 0, 0);
						}
					}

					.jrcView {
						display: inline-block;
						margin-left: 52rpx;
						margin-top: 4rpx;
						margin-bottom: 30rpx;

						.jsc_sz,
						.jsc_cp,
						.jsc_xj {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #D61515;
							text-stroke: 1px rgba(0, 0, 0, 0);
							text-align: left;
							font-style: normal;
							text-transform: none;
							-webkit-text-stroke: 1px rgba(0, 0, 0, 0);
						}

						.jrc_icon {
							width: 28rpx;
							margin-right: 16rpx;
						}
					}
				}

				.keyScenes_top3 {
					display: block;
					margin: 20rpx auto;
					position: relative;
					padding: 28rpx 46rpx;
					width: 650rpx;
					border-radius: 16rpx;
					border: 1rpx solid #F1AEAE;

					.keyScenes_top3_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #8D0B0B;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.keyScenes_top3_icon {
						width: 140rpx;
						height: 140rpx;
						position: absolute;
						top: 0rpx;
						right: 20rpx;
					}

					.keyScenes_top3_nr {
						display: block;
						margin-top: 30rpx;

						.keyScenes_top3_nrItem {
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.nrItem_index {
								width: 86rpx;
								height: 54rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 54rpx;
								background: url(@/static/images/summaryReport/pic9.png) no-repeat;
								background-size: 100% 100%;
								margin-right: 20rpx;
							}

							.nrItem_name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
								margin-right: 30rpx;
							}

							.nrItem_num {
								font-family: Roboto, Roboto;
								font-weight: bold;
								font-size: 22rpx;
								color: #F37A00;
								margin-right: 25rpx;
							}

							.nrItem_jdt {
								width: 166rpx;
								height: 19rpx;
								background: linear-gradient(90deg, #FAD1A3 0%, #FF873C 100%);
								border-radius: 8rpx;
							}
						}
					}
				}
			}

		}
		.keyScenes_text {
			width: 580rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			line-height: 40rpx;
			font-style: normal;
			text-transform: none;
			margin: 40rpx auto;
		}
		.business {
			width: 710rpx;
			margin: 46rpx auto 0;
			background-color: #fffbf1;
			border: 10rpx #FFCFA5 solid;
			border-radius: 20rpx;
			position: relative;
			padding-bottom: 50rpx;

			.business-title {
				width: 500rpx;
				height: 80rpx;
				margin: 0 auto;
				background: url(@/static/images/summaryReport/bg/bg6.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				top: -26rpx;
			}

			.business-list {
				margin-top: 7rpx;
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.business-list-item {
					width: 150rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: url(@/static/images/summaryReport/tapbg2.png) no-repeat;
					background-size: 100% 100%;
					color: #000000;
					text-shadow: 3rpx 3rpx 0 #FFFFFF;
					text-stroke: 1px rgba(0, 0, 0, 0);
				}

				.active {
					background: url(@/static/images/summaryReport/tapbg1.png) no-repeat !important;
					background-size: 100% 100% !important;
					color: #FFFFFF;
					text-shadow: 3rpx 3rpx 0 #000000;
					text-stroke: 1px rgba(0, 0, 0, 0);
				}
			}

			.business-one {
				margin-top: 20rpx;
				width: 100%;
				height: 100rpx;
				background-color: #FDE8DC;
				border: 2rpx #FDE8DC dashed;
				display: flex;
				align-items: center;

				.business-one-left {
					width: 117rpx;
					height: 117rpx;
					background: url(@/static/images/summaryReport/pic16.png) no-repeat;
					background-size: 70% 100%;
				}

				.business-one-center {
					margin-left: 33rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #D61515;
					width: 450rpx;
				}

				.business-one-right {
					font-weight: normal;
					font-size: 48rpx;
					color: #D61515;
				}
			}

			.compare {
				margin-top: 67rpx;
				padding: 0 0rpx 0 60rpx;
				// background: center center url(@/static/images/summaryReport/shuiying.png) no-repeat;
				// background-size: 370rpx 370rpx;

				.draw {
					display: flex;
					margin-top: 34rpx;

					.draw-left {
						width: 50%;

						.draw-left-top {
							font-weight: 400;
							font-size: 30rpx;
							color: #000000;
						}

						.draw-left-bottom {
							display: flex;
							align-items: center;
							margin: 17rpx 0rpx 0rpx 10rpx;

							.draw-left-bottom-icon {
								margin-right: 12rpx;
								width: 56rpx;
								height: 56rpx;
								background: url(@/static/images/summaryReport/icon/icon5.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-left-bottom-font {
								font-weight: bold;
								font-size: 48rpx;
								color: #FF3B2F;
							}

							.draw-left-bottom-unit {
								font-weight: 400;
								font-size: 30rpx;
								color: #FF3B2F;
							}
						}
					}

					.draw-right {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.draw-right-daily {
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							text-align: center;

							.draw-right-icon1 {
								line-height: 100rpx;
								font-size: 26rpx;
								font-weight: bold;
								color: #FFFFFF;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic3.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-right-icon2 {
								line-height: 100rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								font-weight: bold;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic4.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-right-icon3 {
								line-height: 100rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								font-weight: bold;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic12.png) no-repeat !important;
								background-size: 100% 100% !important;
							}
						}
					}
				}
			}

			.threeChart {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				width: 100%;

				.threeChart-item {
					width: 33%;
					height: 200rpx;
					text-align: center;

					.threeChart-item-casing {
						height: 160rpx;
						width: 100%;
					}

					.threeChart-item-text {
						height: 40rpx;
						width: 100%;
					}
				}
			}

			.shunt {
				margin-top: 28rpx;
				padding: 0 70rpx 0 60rpx;
				// background: center center url(@/static/images/summaryReport/shuiying.png) no-repeat;
				// background-size: 370rpx 370rpx;
				display: flex;

				.shunt-left {
					width: 50%;
					display: flex;
					flex-direction: column;
					// align-items: center;
					margin-right: 40rpx;

					.shunt-left-font {
						margin-top: 20rpx;
						text-align: center;
						width: 100%;
					}

					.shunt-left-font1 {
						margin-top: 8rpx;
						display: flex;
						align-items: center;

						i {
							display: inline-block;
							width: 28rpx;
							height: 28rpx;
							background: center center url(@/static/images/summaryReport/icon/icon10-5.png) no-repeat;
							background-size: 28rpx 28rpx;
							margin-right: 10rpx;
						}

						font-size: 24rpx;
						color: #1B9CFF;
					}

					.shunt-left-font2 {
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						i {
							display: inline-block;
							width: 28rpx;
							height: 28rpx;
							background: center center url(@/static/images/summaryReport/icon/icon10-2.png) no-repeat;
							background-size: 28rpx 28rpx;
							margin-right: 10rpx;
						}

						font-size: 24rpx;
						color: #FF3B2F;
					}

					.shunt-left-font3 {
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						i {
							display: inline-block;
							width: 28rpx;
							height: 28rpx;
							background: center center url(@/static/images/summaryReport/icon/icon10-1.png) no-repeat;
							background-size: 28rpx 28rpx;
							margin-right: 10rpx;
						}

						font-size: 24rpx;
						color: #FF3B2F;
					}
				}

				.shunt-right {
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 40rpx;

					.shunt-right-picture {
						width: 178rpx;
						height: 146rpx;
						background: center center url(@/static/images/summaryReport/pic7.png) no-repeat;
						background-size: 178rpx 146rpx;
					}

					.shunt-right-font {
						width: 240rpx;
						height: 60rpx;
						background: linear-gradient(to bottom, #ECBB52, #FFFFFF);
						font-size: 28rpx;
						color: #D61515;
						line-height: 60rpx;
						text-align: center;
						margin-bottom: 34rpx;
					}

					.shunt-right-font1 {
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;

						.icon1 {
							width: 28rpx;
							height: 28rpx;
							background-color: #ff3b2f;
							border-radius: 50%;
							color: #fff;
							text-align: center;
							line-height: 28rpx;
						}

						.icon2 {
							background-color: #C8C7CD;
						}

						.icon3 {
							background-color: #FF9501;
						}

						.city {
							margin: 0 25rpx 0 15rpx;
							font-size: 24rpx;
							color: #000000;
						}

						.percentage {
							font-size: 28rpx;
							color: #FF3B2F;
						}
					}
				}
			}

			.traffic {
				display: flex;
				margin-top: 46rpx;

				.traffic-left {
					width: 50%;
					border-right: 1px #9c9b97 dashed;

					.traffic-left-title {
						display: flex;

						.title-font {
							margin-left: 30rpx;
							font-size: 30rpx;
						}

						.title-bg {
							width: 102rpx;
							height: 102rpx;
							background: center center url(@/static/images/summaryReport/pic8.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.traffic-left-content {
						.content-item {
							display: flex;
							align-items: center;
							margin-top: 12rpx;
							justify-content: space-between;
							padding-right: 8rpx;
							.content-left {
								margin: 0 28rpx 0 24rpx;
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #E64A36;
								line-height: 36rpx;
								text-align: center;
								color: #fff;
							}

							.content-center {
								font: 1;
								margin-right: 20rpx;

								.content-center-font {
									height: 28rpx;
									font-size: 28rpx;
									color: #000000;
								}
							}

							.content-right {
								text-align: right;
								width: 90rpx;
								font-weight: bold;
								font-size: 24rpx;
								color: #5F6475;
								margin-top: auto;
							}
						}
					}

					.visit {
						margin-top: 36rpx;
						width: 100%;
						text-align: center;
						font-size: 28rpx;
						color: #000000;
					}

					.visit-chart {
						margin: 10rpx 0 0 53rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background: center center url(@/static/images/summaryReport/pic5.png) no-repeat;
						background-size: 100% 100%;
					}

					.visit-chart1 {
						margin: 10rpx 0 0 53rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background: center center url(@/static/images/summaryReport/pic6.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.traffic-right {
					width: 50%;
					border-right: none;

				}
			}

			.paragraph {
				margin-top: 50rpx;
				padding: 0 34rpx 0 29rpx;

				.paragraph-text {
					padding: 39rpx 31rpx 57rpx 31rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #EC3826;
					position: relative;

					.paragraph-bg {
						width: 164rpx;
						height: 76rpx;
						position: absolute;
						top: -40rpx;
						left: -18rpx;
						background: center center url(@/static/images/summaryReport/pic11.png) no-repeat;
						background-size: 100% 100%;
					}

					.paragraph-bg1 {
						width: 164rpx;
						height: 76rpx;
						position: absolute;
						bottom: -30rpx;
						right: -35rpx;
						background: center center url(@/static/images/summaryReport/pic11.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.government {
				padding: 0 44rpx 0 66rpx;
				display: flex;
				justify-content: right;

				.government-bg {
					width: 460rpx;
					height: 286rpx;
					background: center center url(@/static/images/summaryReport/pic14.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.success-rate {
				margin-top: 48rpx;
				padding: 0 25rpx 0 58rpx;
				display: flex;

				flex-wrap: wrap;

				// box-sizing: border-box;
				.success-rate-item {
					width: 50%;

					.success-rate-item-top {
						font-size: 34rpx;
						color: #000000;
						line-height: 45rpx;
						text-align: left;
					}

					.success-rate-item-bottom {
						margin-top: 12rpx;
						display: flex;

						.item-bg {
							margin-right: 17rpx;
							width: 110rpx;
							height: 110rpx;
							background: center center url(@/static/images/summaryReport/logo/caili.png) no-repeat;
							background-size: 100% 100%;
						}

						.item-bg1 {
							background: center center url(@/static/images/summaryReport/logo/migu.png) no-repeat;
							background-size: 100% 100%;
						}

						.item-bg2 {
							background: center center url(@/static/images/summaryReport/logo/yidong.png) no-repeat;
							background-size: 100% 100%;
						}

						.item-bg3 {
							background: center center url(@/static/images/summaryReport/logo/ka.png) no-repeat;
							background-size: 100% 100%;
						}

						.item-bg4 {
							background: center center url(@/static/images/summaryReport/logo/yupan.png) no-repeat;
							background-size: 100% 100%;
						}

						.item-bg5 {
							background: center center url(@/static/images/summaryReport/logo/kuaiyou.png) no-repeat;
							background-size: 100% 100%;
						}

						.item-font {
							.text1 {
								font-weight: bold;
								font-size: 24rpx;
								color: #DE258F;
							}

							.text2 {
								text-align: left;
								font-size: 24rpx;
								color: #5F6475;
							}
						}
					}
				}
			}

			.keynote {
				margin-top: 50rpx;
				padding: 0 90rpx 0 70rpx;
				display: flex;
				justify-content: space-between;

				.keynote-item {
					display: flex;
					align-items: center;

					.keynote-item-icon {
						margin-right: 30rpx;
						width: 56rpx;
						height: 56rpx;
						background: url(@/static/images/summaryReport/icon/icon11.png) no-repeat;
						background-size: 100% 100%;
					}

					.keynote-item-icon1 {
						margin-right: 30rpx;
						width: 56rpx;
						height: 56rpx;
						background: url(@/static/images/summaryReport/icon/icon12.png) no-repeat;
						background-size: 100% 100%;
					}

					.keynote-item-icon2 {
						margin-right: 30rpx;
						width: 56rpx;
						height: 56rpx;
						background: url(@/static/images/summaryReport/icon/icon13.png) no-repeat;
						background-size: 100% 100%;
					}

					.keynote-item-icon3 {
						margin-right: 30rpx;
						width: 56rpx;
						height: 56rpx;
						background: url(@/static/images/summaryReport/icon/icon14.png) no-repeat;
						background-size: 100% 100%;
					}

					.keynote-item-text {
						.font {
							font-weight: bold;
							font-size: 24rpx;
							color: #FF3B2F;
						}
					}
				}
			}

			.available {
				margin-top: 50rpx;
				padding: 0 90rpx 0 70rpx;
				display: flex;
				align-items: center;

				.available-icon {
					margin-right: 30rpx;
					width: 56rpx;
					height: 56rpx;
					background: url(@/static/images/summaryReport/icon/icon15.png) no-repeat;
					background-size: 100% 100%;
				}

				.available-text {
					.available-text-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.font {
							font-size: 30rpx;
							color: #000000;
						}

						.font1 {
							font-weight: bold;
							font-size: 24rpx;
							color: #0CB480;
						}
					}

				}
			}
		}
	}

	.network-assurance {
		width: 710rpx;
		margin: 40rpx auto 0;
		background-color: #fffbf1;
		border: 10rpx #FFCFA5 solid;
		border-radius: 20rpx;
		position: relative;
		padding-bottom: 10rpx;

		.network-assurance-title {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			background: url(@/static/images/summaryReport/bg/bg7.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: -26rpx;
		}

		.business-one {
			margin-top: 20rpx;
			width: 100%;
			height: 100rpx;
			background-color: #FDE8DC;
			border: 2rpx #FDE8DC dashed;
			display: flex;
			align-items: center;

			.business-one-left {
				width: 117rpx;
				height: 117rpx;
				background: url(@/static/images/summaryReport/pic0.png) no-repeat;
				background-size: 100% 100%;
			}

			.business-one-center {
				margin-left: 33rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #D61515;
				width: 450rpx;
			}

			.business-one-right {
				font-weight: normal;
				font-size: 48rpx;
				color: #D61515;
			}
		}

		.website {
			margin-top: 78rpx;
			display: flex;
			position: relative;

			.website-left {
				width: 50%;
				text-align: center;
			}

			.website-line {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 120rpx;
				width: 100rpx;
				height: 100rpx;
				background: url(@/static/images/summaryReport/fu.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.network-two {
			border-top: 2rpx #D99999 dashed;
			border-bottom: 2rpx #D99999 dashed;
			background-color: #FDE8DC;
			padding: 25rpx 24rpx 15rpx 64rpx;
			display: flex;
			margin-top: 64rpx;

			.network-two-left {
				width: 510rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #D61515;
				line-height: 45rpx;
			}

			.network-two-right {
				flex: 1;
				font-weight: normal;
				font-size: 48rpx;
				color: #D61515;
				line-height: 65rpx;
				text-align: right;
				text-stroke: 1px rgba(0, 0, 0, 0);
			}
		}

	}

	.secure {
		width: 710rpx;
		margin: 40rpx auto 0;
		background-color: #fffbf1;
		border: 10rpx #FFCFA5 solid;
		border-radius: 20rpx;
		position: relative;
		padding-bottom: 10rpx;

		.secure-title {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			background: url(@/static/images/summaryReport/bg/bg8.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: -26rpx;
		}

		.business-one {
			margin-top: 20rpx;
			width: 100%;
			height: 100rpx;
			background-color: #FDE8DC;
			border: 2rpx #FDE8DC dashed;
			display: flex;
			align-items: center;

			.business-one-left {
				width: 117rpx;
				height: 117rpx;
				background: url(@/static/images/summaryReport/pic0.png) no-repeat;
				background-size: 100% 100%;
			}

			.business-one-center {
				margin-left: 33rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #D61515;
				width: 450rpx;
			}
		}

		.secure-text {
			margin-top: 42rpx;
			display: flex;
			align-items: center;

			.secure-text-left {
				width: 94rpx;
				height: 94rpx;
				background: url(@/static/images/summaryReport/pic10.png) no-repeat;
				background-size: 100% 100%;
				margin: 0 14rpx 0 54rpx;
			}

			.secure-text-right {
				width: 450rpx;
				font-size: 32rpx;
				color: #000000;
				line-height: 48rpx;
			}
		}

		.secure-number {
			margin: 30rpx 0 85rpx 0;
			padding: 0 130rpx 0 122rpx;

			.secure-number-one {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.one-text {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #000000;

					.one-icon {
						width: 36rpx;
						height: 40rpx;
						background: url(@/static/images/summaryReport/icon/icon7-1.png) no-repeat;
						background-size: 100% 100%;
						margin-right: 18rpx;
					}
				}

				.one-number {
					font-weight: bold;
					font-size: 24rpx;
					color: #FF3B2F;

					i {
						font-style: normal;
						font-weight: 400;
					}
				}
			}
		}
	}

	.natural-disaster {
		width: 710rpx;
		margin: 40rpx auto 0;
		// background: #fffbf1 url(@/static/images/summaryReport/shuiying.png) no-repeat;
		// background-position: center center;
		background-size: 370rpx 370rpx;
		border: 10rpx #FFCFA5 solid;
		border-radius: 20rpx;
		position: relative;
		padding-bottom: 10rpx;

		.natural-disaster-title {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			background: url(@/static/images/summaryReport/bg/bg20.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: -26rpx;
		}
		.natural-disaster-title2 {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			background: url(@/static/images/summaryReport/bg/bg21.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: -26rpx;
		}

		.paragraph {
			margin: 30rpx 0;
			padding: 0 34rpx 0 29rpx;

			.paragraph-text {
				padding: 39rpx 31rpx 57rpx 31rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #EC3826;
				position: relative;

				line-height: 50rpx;

				.paragraph-bg {
					width: 164rpx;
					height: 76rpx;
					position: absolute;
					top: -40rpx;
					left: -18rpx;
					background: center center url(@/static/images/summaryReport/pic11.png) no-repeat;
					background-size: 100% 100%;
				}

				.paragraph-bg1 {
					width: 164rpx;
					height: 76rpx;
					position: absolute;
					bottom: -30rpx;
					right: -35rpx;
					background: center center url(@/static/images/summaryReport/pic11.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

	}

	.pageFoot {
		width: 750rpx;
		margin: 20rpx auto;
		display: block;
	}

	.business-two-left {
		background: url(@/static/images/summaryReport/pic0.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.business-three-left {
		width: 117rpx;
		height: 117rpx;
		background: url(@/static/images/summaryReport/pic16.png) no-repeat;
		background-size: 70% 100%;
	}

	.douyin {
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/douyin.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.douyin {
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/douyin.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.kuaishou {
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/kuaishou.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.weixin {
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/weixin.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.tengxunshipin {
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/tengxun.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.tengxunwang {
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/qq.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
    .weixinshipin{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/wxsp.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.bilibili{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/bilibili.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.xiaohongshu{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/xhs.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.aiqiyi{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/aqy.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.youku{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/yk.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.mangguoTV{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/mgtv.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.xiguashipin{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/xgsp.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	.migushipin{
		width: 40rpx !important;
		height: 40rpx !important;
		background: url(@/static/images/summaryReport/logo/migu.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
	
	.traffic1 {
		margin-right: 12rpx;
		width: 56rpx;
		height: 56rpx;
		background: url(@/static/images/summaryReport/icon/icon2.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.traffic2 {
		margin-right: 12rpx;
		width: 56rpx;
		height: 56rpx;
		background: url(@/static/images/summaryReport/icon/icon3.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.traffic3 {
		margin-right: 12rpx;
		width: 56rpx;
		height: 56rpx;
		background: url(@/static/images/summaryReport/icon/icon4.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.traffic4 {
		margin-right: 12rpx;
		width: 56rpx;
		height: 56rpx;
		background: url(@/static/images/summaryReport/icon/icon10.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.traffic5 {
		margin-right: 12rpx;
		width: 56rpx;
		height: 56rpx;
		background: url(@/static/images/summaryReport/icon/icon8.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.message {
		margin-right: 12rpx;
		width: 56rpx;
		height: 56rpx;
		background: url(@/static/images/summaryReport/icon/icon6.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.one-icon2 {

		background: url(@/static/images/summaryReport/icon/icon7-2.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.one-icon3 {
		background: url(@/static/images/summaryReport/icon/icon7-3.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.one-icon4 {
		background: url(@/static/images/summaryReport/icon/icon7-4.png) no-repeat !important;
		background-size: 100% 100% !important;
	}

	.watermark {
		background: center center url(@/static/images/summaryReport/shuiying2.png);
		background-size: 370rpx 670rpx;
		background-repeat: repeat-y;
	}

	.watermark1 {
		background: #fffbf1 center center url(@/static/images/summaryReport/shuiying.png) no-repeat;
		background-size: 370rpx 370rpx;

	}
</style>